search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
29.16k stars 3.52k forks source link

readme

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

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

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 ```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 = 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 ; }; ```
Node.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(``); 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