Popularity
9.3
Stable
Activity
9.3
Growing
23,798
471
3,196

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.

Code Quality Rank: L2
Monthly Downloads: 0
Programming language: JavaScript
License: GNU General Public License v3.0 or later
Tags: Data Visualization     D3     SVG     Parser     HTML5     Object Model     Node-canvas     Graphics     Graphic     Canvas    
Latest version: v5.2.1

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.

Do you think we are missing an alternative of fabric.js or a related project?

Add another 'd3' Library

README

Fabric.js

A simple and powerful Javascript HTML5 canvas library.

  • Website
  • GOTCHAS
  • [Contributing, Developing and More](CONTRIBUTING.md)

<!-- 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 -->

cdnjs 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](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

cdnjs jsdelivr

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

Credits Patreon