Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@zityspace/fabric
Advanced tools
Changelog
[6.0.0-beta19]
src
imports #9657Readme
A simple and powerful Javascript HTML5 canvas library.
JPG
, PNG
, JSON
and SVG
i/oContext | Supported Version | Notes |
---|---|---|
Firefox | ✔️ | modern version (tbd) |
Safari | ✔️ | version >= 10.1 |
Opera | ✔️ | chromium based |
Chrome | ✔️ | modern version (tbd) |
Edge | ✔️ | chromium based |
Edge Legacy | ❌ | |
IE11 | ❌ | |
Node.js | ✔️ | Node.js installation |
Fabric.js Does not use transpilation by default, the browser version we support is determined by the level of canvas api we want to use and some js syntax. While JS can be easily transpiled, canvas API can't.
v6 is a MAJOR effort including migrating to TS and es6, countless fixes, rewrites and features.
Currently in beta, refer to #8299 for guidance.
$ npm install fabric@beta --save
// or
$ yarn add fabric@beta
$ npm install fabric --save
// or
$ yarn add fabric
// v6
import { Canvas, Rect } from 'fabric'; // browser
import { StaticCanvas, Rect } from 'fabric/node'; // node
// v5
import { fabric } from 'fabric';
See browser modules for using es6 imports in the browser or use a dedicated bundler.
Fabric.js depends on node-canvas for a canvas implementation (HTMLCanvasElement
replacement) and jsdom for a window
implementation on node.
This means that you may encounter node-canvas
limitations and bugs.
Follow these instructions to get node-canvas
up and running.
<canvas id="canvas" width="300" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red',
});
canvas.add(rect);
</script>
import React, { useEffect, useRef } from 'react';
import * as fabric from 'fabric'; // v6
import { fabric } from 'fabric'; // v5
export const FabricJSCanvas = () => {
const canvasEl = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const options = { ... };
const canvas = new fabric.Canvas(canvasEl.current, options);
// make the fabric.Canvas instance available to your app
updateCanvasContext(canvas);
return () => {
updateCanvasContext(null);
canvas.dispose();
}
}, []);
return <canvas width="300" height="300" ref={canvasEl}/>;
};
import http from 'http';
import * as fabric from 'fabric/node'; // v6
import { fabric } from 'fabric'; // v5
const port = 8080;
http
.createServer((req, res) => {
const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
canvas.add(rect, text);
canvas.renderAll();
if (req.url === '/download') {
res.setHeader('Content-Type', 'image/png');
res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
canvas.createPNGStream().pipe(res);
} else if (req.url === '/view') {
canvas.createPNGStream().pipe(res);
} else {
const imageData = canvas.toDataURL();
res.writeHead(200, '', { 'Content-Type': 'text/html' });
res.write(`<img src="${imageData}" />`);
res.end();
}
})
.listen(port, (err) => {
if (err) throw err;
console.log(
`> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`
);
});
Project | Description | Demo |
---|---|---|
Three.js | 3D graphics | |
PixiJS | WebGL renderer | |
Konva | Similar features | ❌ |
Canvas2PDF | PDF renderer | |
html-to-image | HTML to image/canvas |
fabricjs.com
Twitter
CodeTriage
Stack Overflow
jsfiddle
Codepen.io
Twitter
FAQs
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
The npm package @zityspace/fabric receives a total of 0 weekly downloads. As such, @zityspace/fabric popularity was classified as not popular.
We found that @zityspace/fabric demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.