Fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

DrawingSVGCanvas
fabricjs/fabric.jsfabricjs.comfabric

README

Fabric.js



A simple and powerful Javascript HTML5 canvas library.

- [Website][website]
- [GOTCHAS][gotchas]
- [Contributing, Developing and More](CONTRIBUTING.md)



🩺 🧪 CodeQL



[cdnjs][cdnjs] [jsdelivr][jsdelivr] Gitpod Ready-to-Code
NPM Downloads per month Bower

Sponsor asturur Sponsor melchiar Sponsor ShaMan123 Patreon


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.

Installation


  1. ``` sh
  2. $ npm install fabric --save
  3. // or
  4. $ yarn add fabric
  5. ```

  1. ``` js
  2. // es6 imports
  3. import { fabric } from 'fabric';

  5. //  or cjs
  6. const fabric = require('fabric').fabric;
  7. ```

Browser

[cdnjs][cdnjs] [jsdelivr][jsdelivr]

See [browser modules][mdn_es6] for using es6 imports in the browser or use a dedicated bundler.

Node.js


Fabric.js depends on [node-canvas][node_canvas] for a canvas implementation (HTMLCanvasElement replacement) and [jsdom][jsdom] for a window implementation on node.
This means that you may encounter node-canvas limitations and [bugs][node_canvas_issues].

Follow these [instructions][node_canvas_install] to get node-canvas up and running.

Quick Start


Plain HTML

  1. ``` html
  2. <canvas id="canvas" width="300" height="300"></canvas>
  3. <script src="https://cdn.jsdelivr.net/npm/fabric"></script>
  4. <script>
  5.   const canvas = new fabric.Canvas('canvas');
  6.   const rect = new fabric.Rect({
  7.     top: 100,
  8.     left: 100,
  9.     width: 60,
  10.     height: 70,
  11.     fill: 'red',
  12.   });
  13.   canvas.add(rect);
  14. </script>
  15. ```

ReactJS

  1. ```tsx
  2. import React, { useEffect, useRef } from 'react';
  3. import { fabric } from 'fabric';

  5. export const FabricJSCanvas = () => {
  6.   const canvasEl = useRef(null);
  7.   useEffect(() => {
  8.     const options = { ... };
  9.     const canvas = new fabric.Canvas(canvasEl.current, options);
  10.     // make the fabric.Canvas instance available to your app
  11.     updateCanvasContext(canvas);
  12.     return () => {
  13.       updateCanvasContext(null);
  14.       canvas.dispose();
  15.     }
  16.   }, []);

  18.   return (<canvas width="300" height="300" ref={canvasEl}/>)
  19. });

  21. ```

Node.js

  1. ``` js
  2. const http = require('http');
  3. const { fabric } = require('fabric');

  5. const port = 8080;

  7. http
  8.   .createServer((req, res) => {
  9.     const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
  10.     const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
  11.     const text = new fabric.Text('fabric.js', { fill: 'blue', fontSize: 24 });
  12.     canvas.add(rect, text);
  13.     canvas.renderAll();
  14.     if (req.url === '/download') {
  15.       res.setHeader('Content-Type', 'image/png');
  16.       res.setHeader('Content-Disposition', 'attachment; filename="fabric.png"');
  17.       canvas.createPNGStream().pipe(res);
  18.     } else if (req.url === '/view') {
  19.       canvas.createPNGStream().pipe(res);
  20.     } else {
  21.       const imageData = canvas.toDataURL();
  22.       res.writeHead(200, '', { 'Content-Type': 'text/html' });
  23.       res.write(`<img src="${imageData}" />`);
  24.       res.end();
  25.     }
  26.   })
  27.   .listen(port, (err) => {
  28.     if (err) throw err;
  29.     console.log(
  30.       `> Ready on http://localhost:${port}, http://localhost:${port}/view, http://localhost:${port}/download`
  31.     );
  32.   });
  33. ```



Other Solutions


ProjectDescriptionDemo
--------------------------------------------------:--:
[Three.js][three.js]3D
[PixiJS][pixijs]WebGL
[Konva][konva]Similar❌
[Canvas2PDF][canvas2pdf]PDF
[html-to-image][html-to-image]HTML

More Resources


- [Demos on fabricjs.com][demos]
- [Fabric.js on Twitter][twitter]
- [Fabric.js on CodeTriage][code_triage]
- [Fabric.js on Stack Overflow][so]
- [Fabric.js on jsfiddle][jsfiddles]
- [Fabric.js on Codepen.io][codepens]

Credits Patreon


- [kangax][kagnax]
- [asturur][asturur] on [Twitter][asturur_twitter]
  Sponsor asturur
- [melchiar][melchiar] Sponsor melchiar
- [ShaMan123][shaman123] Sponsor 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][contributors]

[asturur]: https://github.com/asturur
[asturur_twitter]: https://twitter.com/AndreaBogazzi
[canvas2pdf]: https://github.com/joshua-gould/canvas2pdf
[cdnjs]: https://cdnjs.com/libraries/fabric.js
[code_triage]: https://www.codetriage.com/kangax/fabric.js
[codepens]: https://codepen.io/tag/fabricjs
[contributors]: https://github.com/fabricjs/fabric.js/graphs/contributors
[demos]: http://fabricjs.com/demos/
[gotchas]: http://fabricjs.com/fabric-gotchas
[html-to-image]: https://github.com/bubkoo/html-to-image
[jsdelivr]: https://www.jsdelivr.com/package/npm/fabric
[jsdom]: https://github.com/jsdom/jsdom
[jsfiddles]: https://jsfiddle.net/user/fabricjs/fiddles/
[kagnax]: https://twitter.com/kangax
[konva]: https://github.com/konvajs/konva
[mdn_es6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[melchiar]: https://github.com/melchiar
[node_canvas]: https://github.com/Automattic/node-canvas
[node_canvas_install]: https://github.com/Automattic/node-canvas#compiling
[node_canvas_issues]: https://github.com/Automattic/node-canvas/issues
[patreon_badge]: https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet
[pixijs]: https://github.com/pixijs/pixijs
[shaman123]: https://github.com/ShaMan123
[so]: https://stackoverflow.com/questions/tagged/fabricjs
[three.js]: https://github.com/mrdoob/three.js/
[twitter]: https://twitter.com/fabricjs
[website]: http://fabricjs.com/