Description
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.
fabric.js alternatives and similar libraries
Based on the "d3" category.
Alternatively, view fabric.js alternatives based on common mentions on social networks and blogs.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
Frappe Charts
Simple, responsive, modern SVG Charts with zero dependencies -
sigma.js
A JavaScript library aimed at visualizing graphs of thousands of nodes and edges -
dc.js
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js -
mxGraph
Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
metrics-graphics
A library optimized for concise and principled data graphics and layouts. -
rickshaw
JavaScript toolkit for creating interactive real-time graphs -
cubism
Cubism.js: A JavaScript library for time series visualization. -
processing.js
Processing.js makes your data visualizations work using web standards and without any plug-ins -
react-simple-maps
Beautiful React SVG maps with d3-geo and topojson using a declarative api. -
d3plus
A javascript library that extends D3.js to enable fast and beautiful visualizations. -
Bezier.js
A nodejs and client-side library for (cubic) Bezier curve work -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser -
Ember Charts
[Moved to: https://github.com/Addepar/ember-charts] -
uvCharts
Simple yet powerful JavaScript Charting library built using d3.js -
pykcharts.js
Well designed d3.js charting without the complexity of d3.js. -
dhtmlxSuite v.7.3.0 Standard edition
GPL version of DHTMLX Suite -
COVID-19 in Charts
Visual representations of the progression of COVID-19.
A Non-Cloud Alternative to Google Forms that has it all.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of fabric.js or a related project?
Popular Comparisons
README
Fabric.js
A simple and powerful Javascript HTML5 canvas library.
<!-- build/coverage status, climate -->
[[🩺](../../actions/workflows/build.yml/badge.svg)](../../actions/workflows/build.yml) [[🧪](../../actions/workflows/tests.yml/badge.svg)](../../actions/workflows/tests.yml) [[CodeQL](../../actions/workflows/codeql-analysis.yml/badge.svg)](../../actions/workflows/codeql-analysis.yml)
<!-- npm, bower, CDNJS versions, downloads -->
Features
- Out of the box interactions such as scale, move, rotate, skew, group...
- Built in shapes, controls, animations, image filters, gradients, patterns, brushes...
JPG
,PNG
,JSON
andSVG
i/o- Typed and modular
- [Unit tested](CONTRIBUTING.md#%F0%9F%A7%AA%20testing)
Supported Browsers/Environments
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.
Installation
$ npm install fabric --save
// or
$ yarn add fabric
// es6 imports
import { fabric } from 'fabric';
// or cjs
const fabric = require('fabric').fabric;
Browser
See browser modules for using es6 imports in the browser or use a dedicated bundler.
Node.js
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.
Quick Start
Plain HTML
<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>
ReactJS
import React, { useEffect, useRef } from 'react';
import { fabric } from 'fabric';
export const FabricJSCanvas = () => {
const canvasEl = useRef(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}/>)
});
Node.js
const http = require('http');
const { fabric } = require('fabric');
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`
);
});
Other Solutions
Project | Description | Demo |
---|---|---|
Three.js | 3D graphics | |
PixiJS | WebGL renderer | |
Konva | Similar features | ❌ |
Canvas2PDF | PDF renderer | |
html-to-image | HTML to image/canvas |
More Resources
- Demos on
fabricjs.com
- Fabric.js on
Twitter
- Fabric.js on
CodeTriage
- Fabric.js on
Stack Overflow
- Fabric.js on
jsfiddle
- Fabric.js on
Codepen.io
Credits 
- kangax
- asturur on
Twitter
- melchiar
- ShaMan123
- Ernest Delgado for the original idea of manipulating images on canvas
- Maxim "hakunin" Chernyak for ideas, and help with various parts of the library throughout its life
- Sergey Nisnevich for help with geometry logic
- Stefan Kienzle for help with bugs, features, documentation, GitHub issues
- Shutterstock for the time and resources invested in using and improving Fabric.js
- and all the other contributors