Guide · Open source

How to use Fabric.js: install, add shapes and export

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Fabric.js is a JavaScript library that makes the HTML canvas element easier to work with. It provides ready-made shapes, text, images, filters, gradients and brushes, plus built-in move, scale, rotate and skew interactions. This guide shows you how to install it, put objects on a canvas, and use it in the browser or on Node.js.

Fabric.jsfabricjs/fabric.js · ★ 31.5k · MIT Install options & downloads

Quick start

1Install the package. Run npm install @fabricjs/browser for a browser app, or npm install @fabricjs/node for Node.js.
2Add a canvas element. Place a canvas element in your HTML or component and give it an id or a ref.
3Create the Canvas. Pass the element to new fabric.Canvas to start working with it.
4Add shapes or text. Create objects such as Rect or Text with options like fill, top and left, then call canvas.add.
5Export the result. Use toDataURL or createPNGStream on Node.js, or the SVG and JSON options described in the documentation.

Install Fabric.js for a browser or Node.js project

For new applications, install the package that matches your environment. The browser package is for web apps, and the Node.js package is for server-side rendering with the node-canvas package.

The README also documents the legacy fabric package for existing applications, which remains supported. New applications should prefer the explicit entrypoints.

Node.js: the README recommends running only LTS versions and sets a minimum supported version.
A modern browser is required for browser use.
Fabric.js depends on node-canvas and jsdom on Node.js, so you may run into node-canvas limitations.

# Browser applications
npm install @fabricjs/browser

# Node.js applications
npm install @fabricjs/node

Create a canvas and add your first shape

Give Fabric.js an existing canvas element by its id, then create objects and add them to the canvas. Each object takes options such as position, size and fill colour.

The README's plain HTML example uses a 300 by 300 canvas with a red rectangle. In a bundled app, import Canvas from the browser package first.

Canvas: the drawing surface that holds your objects.
Rect: a rectangle, set with top, left, width, height and fill.
add: puts an object on the canvas.

const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red',
});
canvas.add(rect);

Use built-in interactions and clean up in frameworks

Objects on a Fabric.js canvas can be moved, scaled, rotated, skewed and grouped without writing that logic yourself, according to the feature list in the README.

In React, the README example creates the canvas inside an effect and calls dispose on cleanup. That stops the canvas from lingering after the component unmounts.

Interactions include scale, move, rotate, skew and group.
Shapes, controls, animations, image filters, gradients, patterns and brushes are built in.
Typed and modular: the library is written in TypeScript.

useEffect(() => {
  const canvas = new fabric.Canvas(canvasEl.current, options);
  return () => {
    canvas.dispose();
  };
}, []);

Render canvas images on the server with Node.js

On Node.js, create a canvas with null as the element and set its size. You can then add objects, call renderAll, and send the result as a PNG stream or a data URL.

The README's Node.js example serves a PNG over HTTP, with a download option through a Content-Disposition header.

Use createPNGStream to pipe a PNG to a response.
Use toDataURL to get the canvas content as a data URL.

const canvas = new fabric.Canvas(null, { width: 100, height: 100 });
const rect = new fabric.Rect({ width: 20, height: 50, fill: '#ff0000' });
canvas.add(rect);
canvas.renderAll();
canvas.createPNGStream().pipe(res);

Read and write SVG, JSON, PNG and JPG

The library's feature list says it can read and write JSON and SVG, and export PNG and JPG. Use JSON to save an editable canvas state and SVG when you need vector output.

The README does not list every import or export method in this part, so check the Fabric.js documentation on the website for the exact calls.

JSON and SVG input and output are listed as supported.
PNG and JPG are supported for export.

What people use it for

An interactive canvas editor where users move, resize and rotate shapes.
A simple drawing tool that uses brushes and gradients.
A server that renders a canvas image as a PNG for download.
An app that loads or saves canvas content as SVG or JSON.

Frequently asked questions

Is Fabric.js free to use?

Yes. Fabric.js is released under the MIT licence, as listed in the project details. You can use it in commercial and open-source projects under the terms of that licence.

How do I install Fabric.js?

For browser apps, run npm install @fabricjs/browser. For Node.js apps, run npm install @fabricjs/node. The legacy fabric package is still supported for existing projects.

Which browsers does Fabric.js support?

The README lists Firefox, Safari, Opera, Chrome and Edge (chromium based) as supported. Edge Legacy and Internet Explorer 11 are marked unsupported.

Can Fabric.js run on Node.js?

Yes. Fabric.js can run in Node.js with the node-canvas package. Use the @fabricjs/node package for new Node.js applications.

What is the difference between fabric and @fabricjs/browser?

The fabric package is a legacy compatibility facade that re-exports @fabricjs/browser. The README recommends @fabricjs/browser for new browser applications. Keep fabric and the @fabricjs packages on matching versions.

What are alternatives to Fabric.js?

The README lists Konva, Paper.js, PixiJS and Excalidraw as comparable projects. A lighter drawing API may be enough if you only need a simple static chart or image.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use Fabric.js if you are building an interactive canvas editor or drawing tool and want selectable, movable and resizable objects without writing that logic yourself. Pick a lighter drawing API if you only need a static chart or image, or if you must support Internet Explorer 11 or legacy Edge.

Install options & downloads