fabric.js README

The project's README from github.com/fabricjs/fabric.js. As one markdown file: README.md.

Fabric.js

A simple and powerful Javascript HTML5 canvas library.

Special Thanks

Here is a section for recognition of companies or individuals that support fabricJS with a sponsorship

Atlascloud sponsorship

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

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

# Browser applications
npm install @fabricjs/browser

# Node.js applications
npm install @fabricjs/node

The legacy fabric package remains supported for existing applications:

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

import { Canvas } from 'fabric';
import { StaticCanvas } from 'fabric/node';

New applications should prefer the explicit entrypoints:

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:

New ESM applications should continue to import @fabricjs/browser or @fabricjs/node directly.

Browser

cdnjs jsdelivr

See browser modules 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 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

// Preferred entrypoints for new applications
import { Canvas } from '@fabricjs/browser';
import { StaticCanvas } from '@fabricjs/node';

// Supported compatibility entrypoints
import { Canvas } from 'fabric';
import { StaticCanvas } from 'fabric/node';

// v5 compatibility
import { fabric } from 'fabric';
Plain HTML 
<canvas id="canvas" width="300" height="300"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

fabric.js (fabricjs/fabric.js)

Searching Database…

31.5K ·GitHub
Fabric.js
Что это такое?Fabric.js — это JavaScript-библиотека для работы с элементом canvas в HTML5. Она позволяет создавать и редактировать интерактивные фигуры, текст и изображения, а также преобразовывать данные между SVG и canvas.
Это самостоятельное приложение или библиотека, которую я добавляю в свой проект?Это библиотека, которую вы импортируете в своё веб- или Node.js-приложение, а не самостоятельная программа. Она разделена на модульные пакеты: @fabricjs/browser для браузерных приложений, @fabricjs/node для серверного использования и @fabricjs/core как общее ядро, не привязанное к конкретной среде.
Как добавить её в проект?Установите пакет для нужной среды: @fabricjs/browser для новых браузерных приложений или @fabricjs/node для приложений на Node.js. В существующих проектах можно продолжать использовать устаревший пакет fabric, который для совместимости переэкспортирует @fabricjs/browser.
Нужна ли определённая версия Node.js для использования пакета под Node?Да, поле engines в проекте требует Node.js версии 20.0.0 или новее для сборки и запуска пакета под Node.
На что стоит обратить внимание при установке?Устаревшие среды, такие как IE11 и Edge Legacy, не поддерживаются. Также нужно, чтобы fabric и все пакеты @fabricjs/ были одной версии: при разных версиях могут загрузиться разные среды выполнения, что приведёт к ошибкам.
Можно ли рисовать canvas на сервере, а не только в браузере?Да. С помощью @fabricjs/node можно создать fabric.Canvas в процессе Node.js (например, в HTTP-сервере) и отдать результат как PNG или data URL.
Что поддерживается из коробки?Встроенные возможности взаимодействия с объектами: масштабирование, перемещение, поворот, наклон и группировка, а также анимации, фильтры изображений, градиенты, паттерны и кисти, импорт и экспорт в форматах JPG, PNG, JSON и SVG.
Чем это отличается от Three.js, PixiJS или Konva?Fabric.js — это модель объектов для canvas с встроенной сериализацией в SVG и JSON. Three.js предназначен для 3D-графики, PixiJS — это рендерер на основе WebGL, а Konva предлагает похожий набор возможностей для 2D, но без акцента на разборе SVG, как у Fabric.
What are similar projects?paper.js, lottie-web, react-native-skia, svg.js, konva, react-native-skia, particles.js, shaders
Which topics is it in?vector-graphics, canvas, svg, graphics, design, image-processing, animation, documentation, ui, performance, npm, frontend
Creator
fabricjs
Size
255.2 MB
Stars
31.5K
Updated
CommitOct 14Releasev740May 18
Age
16y
Commits · 90 Days