Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
The 'fabric' npm package is a powerful and versatile library for working with HTML5 canvas. It provides an object model on top of the canvas element, making it easier to create, manipulate, and interact with graphics. Fabric.js is particularly useful for creating rich, interactive applications such as image editors, drawing applications, and data visualization tools.
Creating and Manipulating Shapes
This feature allows you to create and manipulate basic shapes like rectangles, circles, and polygons. The code sample demonstrates how to create a red rectangle and add it to the canvas.
const fabric = require('fabric').fabric;
const canvas = new fabric.Canvas('c');
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);Working with Images
Fabric.js makes it easy to work with images. You can load images from URLs, manipulate them, and add them to the canvas. The code sample shows how to load an image from a URL and add it to the canvas.
const fabric = require('fabric').fabric;
const canvas = new fabric.Canvas('c');
fabric.Image.fromURL('http://example.com/image.jpg', function(img) {
img.set({ left: 100, top: 100 });
canvas.add(img);
});Text Manipulation
Fabric.js provides robust text manipulation capabilities. You can create text objects, style them, and add them to the canvas. The code sample demonstrates how to create a text object with the content 'Hello, world!' and add it to the canvas.
const fabric = require('fabric').fabric;
const canvas = new fabric.Canvas('c');
const text = new fabric.Text('Hello, world!', {
left: 100,
top: 100,
fill: 'blue'
});
canvas.add(text);Event Handling
Fabric.js supports event handling for interactive applications. You can attach event listeners to objects on the canvas. The code sample shows how to attach a 'selected' event listener to a rectangle.
const fabric = require('fabric').fabric;
const canvas = new fabric.Canvas('c');
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
rect.on('selected', function() {
console.log('Rectangle selected');
});Konva is a 2D canvas library for creating desktop and mobile applications. It provides a high-level API for working with shapes, images, and text, similar to Fabric.js. However, Konva is optimized for performance and is often used in applications requiring high frame rates, such as games and animations.
Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph/Document Object Model (DOM) and a lot of powerful functionality to create and work with vector graphics. Compared to Fabric.js, Paper.js is more focused on vector graphics and offers more advanced path manipulation capabilities.
p5.js is a JavaScript library that makes coding accessible for artists, designers, educators, and beginners. It is built on top of the HTML5 Canvas and provides a simple way to create graphics and interactive content. While p5.js is more general-purpose and beginner-friendly, Fabric.js offers more specialized tools for working with canvas-based applications.
A simple and powerful Javascript HTML5 canvas library.
JPG, PNG, JSON and SVG i/o| Context | 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
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.
// v6
import { Canvas, Rect } from 'fabric'; // browser
import { StaticCanvas, Rect } from 'fabric/node'; // node
// v5
import { fabric } from 'fabric';
<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`
);
});
See our ready to use templates.
| Project | Description | Demo |
|---|---|---|
| Three.js | 3D graphics | |
| PixiJS | WebGL renderer | |
| Konva | Similar features | ❌ |
| Canvas2PDF | PDF renderer | |
| html-to-image | HTML to image/canvas |
fabricjs.comTwitterCodeTriageStack OverflowjsfiddleCodepen.io
Twitter
[6.0.0-beta3]
IPoint => XY #8806perPixelTargetFind #8770text was changed but layout was skipped) #8711.codesandbox #8135type from prototype #8714this.constructor types #8675fromObject test is incorrectly trying to restore an instance #8686clone(obj, true) with cloneDeep(obj) and remove all extend, clone calls in favor of object spreads. #8600_initRetinaScaling regression #8520_initRetinaScaling initializaing the scaling regardless of settings in Canvas. #8565fabric.filterBackend => getFilterBackend #8487animate and AnimationRegistry to classes #8297
BREAKING:
findAnimationByXXX from AnimationRegistryanimateColor signature to match animate, removed colorEasinggroupSVGElements #8506Point typings #8434EventSpec recognition #8497Object.__uid++ => uid() #8482createObjectDefaultControls and createTextboxDefaultControls to create copies of control sets. #8415getPatternSrc, rm getPatternSrcFunction #8468git diff bash script + direct git how to merge CHANGELOG.md #8309_setPositionDimensions was removed in favor of setDimensionsWebGLProbe): regression caused by #8199, #8301extraParam should not be passed to options #8295globalCompositeOperation tests #8271sendObjectToPlane in mergeClipPaths #8247Math.hypot, window, document #8277Pattern #8255boundingBoxFromPoints, removed transform #8269populateWithProperties => pick #8202initFilterBackend from HEADER #8199reNonWord from HEADER #8197controls folder #8185ElementsParser => parser/ElementsParser #8183item return type #8152discardActiveObject interrupt current transform. Also add a method to interrupt current transform programmatically #7954mouseout bug #8011changeWidth control behavior #7980setStyle exception #7869getRegularPolygonPath #7918dispose race condition #7885filter option #7844set during text editing #7837contextmenu event #7714getTopContext #7711debug and recreate options #7833eraser to Object state/cache props #7720type #7715#7716#7710getCenterPoint #7699#76577e563c7FAQs
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
The npm package fabric receives a total of 137,539 weekly downloads. As such, fabric popularity was classified as popular.
We found that fabric demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers 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
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.