discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens
fabricjs/fabric.js · source
Snapshot 0 · 2026-11-04T12:47:21Z · TypeScript · MIT
Content fingerprint
8e1d2b833f4ec30e00361b712308e3576bccd32198c279ca2e16c0fa2c23e504GitHub description at capture
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
README at capture
# Fabric.js
<a href="http://fabricjs.com/kitchensink" target="_blank"><img align="right" src="/lib/screenshot.png" width="400"></a>
A **simple and powerful Javascript HTML5 canvas library**.
- [**Website**][website]
- [**Old V5 documentation**](https://fabric5.fabricjs.com)
- [**GOTCHAS**][gotchas]
- [**Contributing, Developing and More**](CONTRIBUTING.md)
## Special Thanks
Here is a section for recognition of companies or individuals that support fabricJS with a sponsorship
<a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=fabric.js" >
<img alt="Atlascloud sponsorship" width="300" height="auto" src="https://www.atlascloud.ai/logo.svg" style="background-color: white;">
</a>
Atlas Cloud is a full-modal AI inference platform that gives developers a single AI API to access video generation, image generation, and LLM APIs. Instead of managing multiple vendor integrations, you connect once and get unified access to 300+ curated models across all modalities.
Check out Atlas Cloud's new coding plan promotion for more budget-friendly API access：[https://www.atlascloud.ai/console/coding-plan](https://www.atlascloud.ai/console/coding-plan?utm_source=github&utm_medium=link&utm_campaign=fabric.js)
</div>
## 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#-testing)
- Security efforts [](https://www.bestpractices.dev/projects/12579)
#### 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](#nodejs) |
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
For new applications, install the environment-specific package:
```bash
# Browser applications
npm install @fabricjs/browser
# Node.js applications
npm install @fabricjs/node
```
The legacy `fabric` package remains supported for existing applications:
```bash
$ npm install fabric --save
# or use yarn
$ yarn add fabric
# or use pnpm
$ pnpm add fabric
```
## Packages and migration
| Package | Role |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `fabric` | Legacy compatibility facade. It re-exports `@fabricjs/browser`. |
| `@fabricjs/browser` | Preferred entrypoint for new browser applications. |
| `@fabricjs/node` | Preferred entrypoint for new Node.js applications. It owns the Node-specific dependencies. |
| `@fabricjs/core` | Shared, environment-neutral runtime used by the browser and Node packages. It is intended for advanced and shared dependencies. |
| Extension packages | Optional features imported individually, such as `@fabricjs/aligning-guidelines`. |
Existing imports continue to work:
```js
import { Canvas } from 'fabric';
import { StaticCanvas } from 'fabric/node';
```
New applications should prefer the explicit entrypoints:
```js
import { Canvas } from '@fabricjs/browser';
import { StaticCanvas } from '@fabricjs/node';
import { AligningGuidelines } from '@fabricjs/aligning-guidelines';
```
The `fabric` and `fabric/node` facades share the same class identities as
their corresponding workspace packages. Keep `fabric` and every
`@fabricjs/*` package on matching versions; mixing mismatched versions can
load separate runtimes.
`@fabricjs/core` has no Node-specific runtime dependencies, but it is not a
DOM-free API. Advanced consumers using core APIs that touch DOM or canvas must
provide a suitable environment implementation.
### Legacy distribution files
The ESM `fabric` and `fabric/node` entries are small compatibility facades over
the workspace packages. The legacy standalone files remain available for
existing usage:
- `dist/index.js` and `dist/index.min.js` are full browser UMD builds from
`@fabricjs/browser`, for `<script>` tags and `require('fabric')`.
- `dist/index.node.cjs` is the legacy CommonJS compatibility build for
`require('fabric/node')`.
New ESM applications should continue to import `@fabricjs/browser` or
`@fabricjs/node` directly.
#### Browser
[][cdnjs]
[][jsdelivr]
See [browser modules][mdn_es6] for using es6 imports in the browser or use a dedicated bundler.
#### Node.js
We strongly recommend to run your applications only LTS versions of node.
Said so the minimum supported version of node is 20.
We bump up the minimum version of node with a Major release only when the dependencies force us to do so.
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
```js
// Preferred entrypoints for new applications
import { Canvas } from '@fabricjs/browser';
import { StaticCanvas } from '@fabricjs/node';
```
```js
// Supported compatibility entrypoints
import { Canvas } from 'fabric';
import { StaticCanvas } from 'fabric/node';
// v5 compatibility
import { fabric } from 'fabric';
```
<details><summary><b>Plain HTML</b></summary>
```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>
```
</details>
<details><summary><b>React.js</b></summary>
```tsx
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}/>;
};
```
</details>
<details><summary><b>Node.js</b></summary>
```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`,
);
});
```
</details>
See our ready to use [templates](./.codesandbox/templates/).
---
## Other Solutions
| Project | Description |
| ------------------------------ | -------------------- |
| [Three.js][three.js] | 3D graphics |
| [PixiJS][pixijs] | WebGL renderer |
| [Konva][konva] | Similar features |
| [html-to-image][html-to-image] | HTML to image/canvas |
## 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 [](https://www.patreon.com/fabricJS)
- [kangax][kagnax]
- [asturur][asturur] on [`Twitter`][asturur_twitter]
[](https://github.com/sponsors/asturur)
- [ShaMan123][shaman123] [](https://github.com/sponsors/ShaMan123)
- [melchiar][melchiar] [](https://github.com/sponsors/melchiar)
- Ernest Delgado for the original idea of [manipulating images on canvas](http://www.ernestdelgado.com/archive/canvas/)
- [Maxim "hakunin" Chernyak](http://twitter.com/hakunin) for ideas, and help with various parts of the library throughout its life
- [Sergey Nisnevich](http://nisnya.com) for help with geometry logic
- [Stefan Kienzle](https://twitter.com/kienzle_s) for help with bugs, features, documentation, GitHub issues
- [Shutterstock](http://www.shutterstock.com/jobs) 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
[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]: https://fabricjs.com/docs/old-docs/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/