Fabric NPM | npm.io

Fabric.js

A simple and powerful Javascript HTML5 canvas library.

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	✔️	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.

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

<canvas id="canvas" width="300" height="300"></canvas>

<script src="https://cdn.jsdelivr.net/npm/fabric@6.4.3/dist/index.js"></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

More Resources

Credits

kangax
asturur on Twitter
ShaMan123
melchiar
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

canvas graphic graphics SVG node-canvas parser HTML5 object model

@kubric/creative-renderer live-toolbar-test-internal live-toolbar-test1 ziflow-js-microservice psd2template-cc psd2templates @gzc/x-canvas oshinstar-frontend content-file-preview-renderer arno-image-editor custom-arno-image-editor custom-vue-image-editor vectr-core2 appup-components appup-components-dynamic xtbg-screenshots @gzc/xtbg-drawing dynos.viewer.component zwwl-image-editor @thebird956/angular-editor-fabric-js cov-aureus smt-trend exp-annotation-tool exp-canvas redpen-canvas iwb plot-plan-editor nobokye-feedback shirtnetwork-designer cover-map lsjghldshngvkjdghiahgoashgiuhdsg ramdom-6060 picture-tools tui-image-editor-sivaz uniconsoft-ng-pdfviewer react-image-akash vue_fabric_canvas zx-editly @uibox-pro/custom-control-sample @uibox-pro/custom-one tui-image-editor-ssw tegaki-image-editor tegaki-key-value zrfikry-practice-package @garib_dev/tri3d-cropper cyldesigners react-design-editor-test-rish designercopycyl rishtestt cyldesigner eagle-designer designernew 3dengine @vue3d/uv-editor react-design-editor-andres-mestra fabric-textarea v-fabric indus-trend ngx-design-creator @inthepanchine/image-edit @cityfun.dev/mapbox-gl-export-with-cn layoutlab-react @scenify/core @scenify/renderer @scenify/sdk design_editor_poc laserpecker-vue-editor minime-pillow minime-pillow-vue floor-map-component @infinitebrahmanuniverse/nolb-fab dsg-editor image-mark-pen-box @everything-registry/sub-chunk-1643 aime-workflow-feedback2 caseark-ui eviewer7-lib fabritor fabritor-design fabritor-web canvas-fabric-edit canvas-fabric-edit100 canvas-fabric-edit97 canvas-fabric-edit98 canvas-fabric-edit99 mv-executor-view @rovahub/scenify-sdk t-image-editor tass-canvas-editor tass-fabric-history tater-taste tagpackage tag-graph tagging-master teng-xin svg-png-converter svg-png-converter2 svg-png-converter3 svgjsonconverter svgjsonifier

9 days ago

9 days ago

5 days ago

5 days ago

9 days ago

4 days ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

7 months ago

8 months ago

9 months ago

10 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

4.0.0-beta.12-browser

5 years ago

4.0.0-beta.11-browser

5 years ago

4.0.0-beta.11

5 years ago

4.0.0-beta.10-browser

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

11 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

12 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

13 years ago

fabric v6.5.1

Fabric.js

Features

Supported Browsers/Environments

Installation

Browser

Node.js

Quick Start

Other Solutions

More Resources

Credits