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 | ✔️ | 58 |
| Safari | ✔️ | 11 |
| Opera | ✔️ | chromium based |
| Chrome | ✔️ | 64 |
| 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.
$ 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 |
|---|---|
| Three.js | 3D graphics |
| PixiJS | WebGL renderer |
| Konva | Similar features |
| html-to-image | HTML to image/canvas |
fabricjs.comTwitterCodeTriageStack OverflowjsfiddleCodepen.io
Twitter
FAQs
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.