Skip to content

fabricjs/fabric.js

Folders and files

NameName
Last commit message
Last commit date
Oct 4, 2024
Jan 21, 2024
Dec 4, 2024
Jan 13, 2024
Nov 16, 2024
Dec 4, 2024
Oct 12, 2024
Aug 29, 2024
Aug 10, 2024
Aug 15, 2024
Jan 26, 2025
Jan 11, 2025
Feb 2, 2023
Feb 2, 2023
Feb 7, 2015
Feb 2, 2023
Jul 30, 2014
Oct 28, 2022
Sep 27, 2024
Jan 13, 2024
Aug 15, 2024
Jan 16, 2021
Aug 11, 2024
Sep 11, 2022
Jan 26, 2025
Jun 20, 2015
Dec 20, 2024
May 19, 2019
Dec 26, 2024
Oct 1, 2021
Jun 17, 2023
Sep 12, 2022
Aug 15, 2024
Nov 16, 2024
Jan 14, 2024
Feb 3, 2023
Aug 29, 2024
Aug 15, 2024
Aug 29, 2024
Aug 30, 2023
Jan 1, 2025
Jan 11, 2025
Jul 24, 2023
Aug 15, 2024
Aug 8, 2021
Feb 4, 2023
Sep 27, 2024
Oct 25, 2022
Aug 11, 2024
Dec 3, 2024
Aug 17, 2024

Repository files navigation

Fabric.js

A simple and powerful Javascript HTML5 canvas library.


🩺 🧪 CodeQL


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

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 polyfills by default, or tries to keep it at minimum. 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 use yarn
$ yarn add fabric
# or use pnpm
$ pnpm install 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

// 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@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>
React.js
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
Three.js 3D graphics
PixiJS WebGL renderer
Konva Similar features
html-to-image HTML to image/canvas

More Resources

Credits Patreon