fabric

What is fabric?

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.

What are fabric's main functionalities?

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');
});

Other packages similar to fabric

konva

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

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

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.

README

Fabric.js

A simple and powerful Javascript HTML5 canvas library.

• Website
• GOTCHAS
• Contributing, Developing and More

---

---

---

---

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 and SVG i/o
• Typed and modular
• Unit tested

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.

Migrating to v6

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

Installation

$ npm install fabric --save
// or
$ yarn add 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

// v6
import { Canvas, Rect } from 'fabric'; // browser
import { StaticCanvas, Rect } from 'fabric/node'; // node

// v5
import { fabric } from 'fabric';

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 * 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}/>;
};

Node.js

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.

---

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

Changelog

[6.0.0-beta3]

• chore(TS): Path type fixes #8842
• fix(TS): add types to some untyped empty arrays #8830
• chore(TS): Complete typings for toObject/fromObject #8756
• fix(): text styles edge case #8820
• chore(TS): Group types #8807
• chore(TS): Path util typings and refactoring #8787
• rename(): IPoint => XY #8806
• ci(): use sandbox apps in issue template, use the current branch when deploying an app, minors #8803
• perf(): optimize perPixelTargetFind #8770
• BREAKING fix(): reflect NUM_FRACTION_DIGITS to SVG path data [#8782] (https://github.com/fabricjs/fabric.js/pull/8782)
• fix(IText): layout change regression caused by #8663 (text was changed but layout was skipped) #8711
• fix(IText, Textbox): fix broken text input #8775
• ci(): .codesandbox #8135
• ci(): disallow circular deps #8759
• fix(): env WebGL import cycle #8758
• chore(TS): remove controls from prototype. BREAKING: controls aren't shared anymore #8753
• chore(TS): remove object type from prototype #8714
• chore(TS): type Object props #8677
• chore(TS): remove default values from filter prototypes #8742
• chore(TS): remove default values from Objects prototypes, ( filters in a followup ) #8719
• fix(Intersection): bug causing selection edge case #8735
• chore(TS): class interface for options/brevity #8674
• ci(): fix import autocomplete in dev mode #8725
• chore(): remove deprecated class util #8731
• lint(): fix eslint errors #8729
• fix(TS): this.constructor types #8675
• fix(DraggableText): drag image blur #8712
• ci(): Fix tests for firefox 110 update #8710
• chore(): index files for exports and tree shaking #8661
• ci(test): cleanup node config (#8694 followup) #8707
• fix(): BREAKING set/discard active object return value, discard active object now return false if no discard happened #8672
• fix(): selection logic to support nested multiselection #8665
• fix(test): remove bad node config #8694
• fix(): keep browser files as .js #8690
• fix(): object dispose removes canvas/event refs #8673
• fix(test): Textbox fromObject test is incorrectly trying to restore an instance #8686
• TS(): Moved cache properties to static properties on classes #xxxx
• refactor(): Moved cache properties to static properties on classes #8662
• docs(): v6 announcements #8664
• ci(): remove TS transformer #8660
• refactor(): BREAKING remove stateful mixin and functionality #8663
• patch(): Added WebGLProbe to env, removed isLikelyNode, added specific env dispose ( instead of cleanup JSDOM ) #8652
• ci(): Removed the browser publish script #8656
• feat(): Node entry point #8632
• chore(): Change import and export strategy #8622
• chore(): rename files to modern style #8621
• chore(): move and rename text & itext files and organize as folders, rename mixins #8620
• chore(TS): type IText, IText behavior, IText click behavior #8610
• BREAKING: refactor clone(obj, true) with cloneDeep(obj) and remove all extend, clone calls in favor of object spreads. #8600
• chore(TS): Fix some error caused by ts-nocheck removals #8615
• refactor(IText): extract draggable text logic to a delegate #8598
• chore(TS): Update StaticCanvas to remove ts-nocheck #8606
• chore(TS): Update filters to remove ts-nocheck and added types where missing #8609
• chore(TS): Intersection class, finalize TS #8603
• chore(TS): Update Pattern to remove ts-nocheck and added types where missing #8605
• chore(TS): Followup for interactivy and controls migration to TS #8404
• refactor(IText): Fixes Draggable Text for retina and viewport transform #8534
• chore(TS): refactor canvas init, fix _initRetinaScaling regression #8520
• chore(TS): remove all remaining empty declarations #8593
• refactor(IText): modernize IText cursor animation based on animation API changes (and fix minor regression) plus leftovers from #8547 #8583
• refactor(Canvas, IText): Handle cross instance text editing states to an EditingManager class #8543
• chore(TS): move to export, babel, new rollup, change import statement for fabric. #8585;
• chore(TS): Add declare in front of properties that are type definitions. #8574
• refactor(Animation): BREAKING: Animation api reduction and semplification (byValue is removed, '+=' syntax is removed, callbacks fired 100%) #8547
• feat(PolyControl): modify the shape of a poly with control points #8556
• BREAKING: remove Object.stateful and Object.statefulCache #8573
• fix(IText): refactor clearing context top logic of itext to align with brush pattern, using the canvas rendering cycle in order to guard from edge cases #8560
• fix(Canvas): _initRetinaScaling initializaing the scaling regardless of settings in Canvas. #8565
• fix(Canvas): regression of canvas migration with pointer and sendPointToPlane #8563
• chore(TS): Use exports from files to build fabricJS, get rid of HEADER.js #8549
• chore(): rm fabric.filterBackend => getFilterBackend #8487
• chore(TS): migrate text SVG export mixin #8486
• refactor(TS): animate and AnimationRegistry to classes #8297 BREAKING:
  • return animation instance from animate instead of a cancel function and remove findAnimationByXXX from AnimationRegistry
  • change animateColor signature to match animate, removed colorEasing
• fix(Object Stacking): 🔙 refactor logic to support Group 🔝
• chore(TS): migrate Group/ActiveSelection #8455
• chore(TS): Migrate smaller mixins to classes (dataurl and serialization ) #8542
• chore(TS): Convert Canvas events mixin and grouping mixin #8519
• chore(TS): Remove backward compatibility initialize methods #8525
• chore(TS): replace getKlass utility with a registry that doesn't require full fabricJS to work #8500
• chore(): use context in static constructors #8522
• chore(TS): Convert Canvas class #8510
• chore(TS): Move object classes #8511
• chore(TS): polish text #8489
• chore(TS): fix import cycle, extract groupSVGElements #8506
• chore(TS): permissive Point typings #8434
• chore(TS): polish files #8488
• fix(TS): EventSpec recognition #8497
• chore(): rm dead code #8493
• fix(scaleObject): handle when scale is 0 to not bug flip #8490
• chore(TS): migrate StatiCanvas to TS #8485
• chore(): refactor Object.__uid++ => uid() #8482
• chore(TS): migrate object mixins to TS #8414
• chore(TS): migrate filters #8474
• chore(TS): BaseBrush abstract methods #8428
• feat(): Add createObjectDefaultControls and createTextboxDefaultControls to create copies of control sets. #8415
• fix(PatternBrush): getPatternSrc, rm getPatternSrcFunction #8468
• chore(TS): more FabricObject typing #8405
• chore(TS): Observable types #8431
• chore(TS): migrate Group/ActiveSelection #8455
• fix(TS): migration error of itext key mixin (#8421) #8457
• chore(TS): migrate text classes/mixins #8421
• chore(TS): migrate Image #8443
• chore(TS): migrate Shadow #8462
• fix(Itext): show incorrect pointer position after scale changed
• chore(TS): migrate text classes/mixins #8408
• chore(TS): migrate Collection #8433
• ci(): Simplify filestats even more #8449
• chore(TS): migrate filter backends #8403
• chore(TS): migrate Text classes/mixins #8408
• chore(TS): migrate Path #8412
• ci(): remove unwanted build stats (from #8395) #8416
• chore(TS): migrate Line #8413
• chore(TS): migrate Polyline/Polygon #8417
• chore(TS): migrate Rect #8411
• chore(TS): migrate Ellipse #8408
• chore(TS): migrate Triangle to TS #8410
• chore(TS): migrate Circle to TS #8406
• chore(TS): convert Object interactivity mixin to its own class #8401
• chore(TS): Convert controls e6/ts #8400
• ci(): remove buggy changelog action in favor of git diff bash script + direct git how to merge CHANGELOG.md #8309
• fix(): skewing controls accuracy + successive interactions #8380
• chore(TS): Convert Geometry and Origin to classes/e6/ts #8390
• ci(): build stats report #8395
• chore(TS): convert object to es6 class #8322
• docs(): guides follow up, feature request template #8379
• docs(): refactor guides, bug report template #8189
• BREAKING fix(polyline/polygon): stroke bounding box for all line join/cap cases #8344 BREAKING: _setPositionDimensions was removed in favor of setDimensions
• test(): Added 2 tests for polygon shapes and transforms with translations #8370
• fix(textStyles): Handle style objects with only a textBackgroundColor property in stylesToArray #8365
• chore(): fix typos in intersection file #8345
• fix(textStyles): Handle empty style object in stylesToArray #8357
• ci(build): safeguard concurrent unlocking #8309
• ci(): update stale bot #8307
• ci(test): await golden generation in visual tests #8284
• ci(): Add a pipeline check for verifying that CHANGELOG.md has been updated #8302
• BREAKING feat(fabric.IText) rename data-fabric-hiddentextarea to data-fabric with value textarea
• ci(): adds a lock file to the repo when build is in progress, makes local testing wait for the build to complete #8290
• fix(WebGLProbe): regression caused by #8199, #8301
• fix(fabric.utils) added missing import in dom_misc #8293
• fix(Object): extraParam should not be passed to options #8295
• test(): add globalCompositeOperation tests #8271
• fix(): use sendObjectToPlane in mergeClipPaths #8247
• chore(): prettify all source code #8276
• chore(lint): disallow Math.hypot, window, document #8277
• ci(): Add node18 and add a check for prettier #8275
• ci(test): suite fixes for browser #8176
• ci(): install prettier #8242
• ci(): migrate scripts to es6 modules #8266
• BREAKING refactor(util): remove lang_array since there are no more use cases #8274
• chore(TS): migrate Pattern #8255
• ci(): add source-map-support for testing #8248
• ci(): file cleanup #8254
• ci(): fix test global error handlers #8267
• fix(fabric.Canvas): dispose and request animation frame scheduling fix #8220
• ci(test): fix golden creation from browser #8270
• BREAKING refactor(util): boundingBoxFromPoints, removed transform #8269
• ci(): reintroduce node 14 testing #8232
• chore(TS): finish converting utils #8230
• test(): Add extensive coverage for mergeClipPath #8245
• ci() Nicer names for GHA #8235
• Update tests.yml
• ci(): consolidate test workflows #8227
• chore(TS): BREAKING: populateWithProperties => pick #8202
• chore(TS): extract initFilterBackend from HEADER #8199
• chore(TS): extract caches from HEADER #8198
• Chore(TS): migrate Intersection #8121
• chore(TS): es6 for util/path.ts and more utils converted #8201
• fix(ci): report build script failure + fix missing logs #8188
• fix(): update window => fabric.window #8209
• chore(TS): extract const reNonWord from HEADER #8197
• chore(TS): extract config values in its own module #8194
• ci(): update code coverage action comment #8205
• fix(fabric.Gradient): Guard against deep mutation on svg export for color exports #8196
• chore(TS): migrate gradient #8154
• Chore(TS): Convert more utilities #8193
• docs(CONTRIBUTING): fix typo #8191
• chore(TS): move control files under controls folder #8185
• chore(TS): ElementsParser => parser/ElementsParser #8183
• dep(): fabric.console #8184
• chore(TS) convert more utils #8180
• chore(TS): migrate brushes #8182
• fix(): propagate failed exit code to the process #8187
• fix(): regain focus on mouse move #8179
• chore(TS): read fabric version from package.json
• ci(test): migrate test cmd #8138
• chore(TS): Move more utils to TS #8164
• chore(TS): more conversion of utils #8148
• chore(): Update package.json contributors #8157
• docs(contributing): rework #8158
• fix(): add pointer data to drop event #8156
• chore(TS): prepare for gradient migration #8155
• docs(Collection): JSDOC fix item return type #8152
• chore(ts): Convert some utils #8123
• chore(TS): Migrate Circle to es6/ts
• chore(TS): migrate parser #8122
• fix(TS): color merge conflict #8133
• chore(TS): migrate Point to es6 class and update references. Deprecate xxxEquals methods #8120
• Chore(TS) Rect to Es6, remove global scope function. #8118
• chore(TS): Color #8115
• chore(TS): prepare for Color migration #8116
• ci(): adapt build script to rollup #8114
• fix(): Delegate toJson to toObject properly and fix tests #8111
• chore(TS): convert file ext #8108
• ci(scripts) patch #8102
• ci(): switch the old custom build for rollup #8013
• feat(IText): Draggable text #7802
• feat(Text): condensed styles structure v6 #8006
• feat(): on discardActiveObject interrupt current transform. Also add a method to interrupt current transform programmatically #7954
• fix(fabric.StaticCanvas): imageSmoothing setter for node-cavas special case #8032
• feat(): support aborting loading resources that requires network calls (promises/requests) #7827
• fix(fabric.IText) wrong typeof syntax #8023
• ci(typescript): transformer #8020
• fix(canvas): clear transform event caching on resize #8021
• fix(fabric.Canvas): mouseout bug #8011
• refactor(object_interactivity): draw operation for borders can be overriden #7932
• feat(Group,canvas): remove canvas from object before firing removed event, filter insertAt for group
• tests(): fix the visual test loop to work again on fabricjs.com #8007
• fix(Group): 🛠️ layout, angle and origin ⚡ #8004
• chore(): move away from extend/clone #8001
• fix(Canvas): flipped viewport transform coords #7515
• fix(): cleanup merge conflict resolution artifact #7956
• fix(Group): part 2 minors changes #7916
• feat(fabric.Image.filter): Alpha support for Invert filter #7933
• fix(EraserBrush): visual trace while erasing #7991
• fix(Point): safeguard initialization #7961
• fix(Textbox): flipped changeWidth control behavior #7980
• test(): remove deleted event from test name #7992
• feat(observable): BREAKING return disposer instead of context for chaining #7994
• fix(util): setStyle exception #7869
• test(freedrawing): test enhancement #7941
• Cleanup README.md #7947
• ci() update uglifyjs #7939
• fix(): assigning canvas for collections #7934
• fix(EraserBrush): use rendered objects for pattern #7938
• fix(v6): 4th PR of Group Rewrite 🎛️ nested controls 😜 #7861
• feat(path): getRegularPolygonPath #7918
• fix(canvas export): regression caused by safegurading #7907
• ci(): fix build script option exclude #7915
• feat(Group): 2nd Patch of New Group! 🎉 #7859
• chore(ci): rename option #7875
• fix(Canvas): dispose race condition #7885
• Update funding.yml include Shachar and Steve
• feat(Group): Change group code, adapt the rest around it #7858
• chore(): PR template #7857
• fix(Canvas): safeguard canvas add #7866
• fix(fabric.Text): support text alignments in RTL text #7674
• chore(canvas): minor cleanup #7851
• docs(): fix typo, fix JSDOC for website, minors #7853
• fix(Canvas): safeguard dispose #7775
• fix(Polyline): safegurad _setPositionDimensions #7850
• feat(ci): CLI logging and filter option #7844
• fix(itext): stop cursor on blur #7784
• fix(itext): set during text editing #7837
• fix(Canvas): Safeguard from multiple initialization #7776
• feat(): fire contextmenu event #7714
• docs(Text): add proper type for GraphemeBBox #7834
• chore(): create an alias for getSelectionContext as getTopContext #7711
• fix(EraserBrush): inverted erasing #7689
• fix(ci): CLI debug and recreate options #7833
• feat(ci): better cli #7825
• feat(fabric.util.animation): add delay option #7805
• chore(): Update bug report templates #7790
• fix(Textbox): expose methods for overrides + fix resize filckering #7806
• fix(fabric.Canvas): canvas export, force retina scaling >= 1
• fix(itext_key_behavior.mixin.js): typo #7816
• feat(): dataURL export - filter objects #7788
• feat(util): transform utils #7614
• chore/fix(v6): prerequisites for Group #7728
• tests() adding an extra controls test where the group are transformed #7736
• chore(): Group prerequisite minor refactor object_origin
• fix(): ensure scaling factor is positive for strokeUniform #7729
• MAJOR chore(v6): neutral prerequisites for fabric.Group rework #7726
• fix(): add eraser to Object state/cache props #7720
• feat(Object.isType): accept multiple type #7715
• MAJOR feat(fabric.Point): divide, scalarDivide, scalarDivideEquals #7716
• MAJOR feat(): Reuse fabric.Point logic for scaling and naming consistency #7710
• feat(Canvas#getCenter): migrate to getCenterPoint #7699
• MAJOR feat(fabric) remove callbacks in for Promise support #7657
• chore(): BREAKING Cleanup fabric.Point for v6 #7709 7e563c7