Migrating to v6
v6 is a MAJOR effort including migrating to TS and es6, countless fixes, rewrites and features.
Currently in beta, refer to #8299 for guidance.
$ npm install fabric@beta --save
// or
$ yarn add fabric@beta
Browser
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
```html ```ReactJS
```tsx import React, { useEffect, useRef } from 'react'; import * as fabric from 'fabric'; // v6 import { fabric } from 'fabric'; // v5 export const FabricJSCanvas = () => { const canvasEl = useRefNode.js
```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(`See our ready to use templates.
Other Solutions
Project | Description | Demo |
---|---|---|
Three.js | 3D graphics | |
PixiJS | WebGL renderer | |
Konva | Similar features | ā |
html-to-image | HTML to image/canvas |
More Resources
- Demos on
fabricjs.com
- Fabric.js on
Twitter
- Fabric.js on
CodeTriage
- Fabric.js on
Stack Overflow
- Fabric.js on
jsfiddle
- Fabric.js on
Codepen.io
Credits ![Patreon](https://img.shields.io/static/v1?label=Patreon&message=%F0%9F%91%8D&logo=Patreon&color=blueviolet)
- kangax
- asturur on
Twitter
- melchiar
- 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