# Fabric.js — Powerful HTML5 Canvas Library for Interactive Graphics

> A feature-rich JavaScript library that provides an interactive object model on top of the HTML5 canvas element, enabling drawing, manipulation, and animation of shapes, images, and text.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Fabric.js — Powerful HTML5 Canvas Library for Interactive Graphics

## Quick Use
```bash
npm install fabric
```
```javascript
import { Canvas, Rect } from 'fabric';
const canvas = new Canvas('myCanvas');
canvas.add(new Rect({ left: 100, top: 100, width: 50, height: 50, fill: 'red' }));
```

## Introduction
Fabric.js provides an interactive object model on top of the HTML5 canvas element. It simplifies canvas programming by offering a rich set of drawing primitives, SVG parsing, and an event-driven interaction layer that raw canvas API lacks.

## What Fabric.js Does
- Renders shapes, images, text, and paths with a persistent object graph
- Enables selection, grouping, scaling, rotation, and drag-and-drop interactions
- Parses SVG files and converts them into editable canvas objects
- Supports free-hand drawing, clipping, filters, and animations
- Serializes the canvas state to JSON and back for persistence

## Architecture Overview
Fabric.js wraps the native CanvasRenderingContext2D behind an object-oriented layer. Each visual element is a FabricObject subclass tracked in an ordered collection. A centralized event bus dispatches pointer, selection, and modification events. Rendering uses a two-canvas strategy: a main display canvas and a hidden cache canvas for per-object bitmap caching, enabling efficient redraws.

## Self-Hosting & Configuration
- Install via npm, yarn, or load from a CDN script tag
- Import the full bundle or use tree-shakeable ES module imports
- Configure canvas dimensions, background color, and selection styles via constructor options
- Enable or disable features like object caching, retina scaling, and touch support
- Works in Node.js via jsdom or node-canvas for server-side rendering

## Key Features
- SVG-to-canvas and canvas-to-SVG bidirectional conversion
- Built-in image filters (brightness, contrast, blur, pixelate, and more)
- Free-drawing brush system with configurable width, color, and pattern
- Robust serialization with toJSON/loadFromJSON for save and restore
- Active community maintaining TypeScript definitions and v6 modular architecture

## Comparison with Similar Tools
- **Konva** — scene-graph canvas lib focused on high-performance layered rendering; less SVG support
- **Paper.js** — vector graphics scripting with path booleans; smaller interaction model
- **PixiJS** — WebGL-first 2D renderer for games; no built-in object manipulation UI
- **Canvas API (raw)** — maximum control but no object persistence or event handling
- **SVG DOM** — native vector but performance degrades with thousands of elements

## FAQ
**Q: Can Fabric.js render on the server?**
A: Yes. Use node-canvas or jsdom to instantiate a Fabric canvas in Node.js for thumbnails or exports.

**Q: Does it support WebGL?**
A: Fabric.js uses Canvas2D by default. Image filters optionally run through a WebGL backend for GPU acceleration.

**Q: How large can the canvas be?**
A: Browser limits apply (typically 4096-16384px per side). Fabric supports virtual canvas and viewport transforms for pan/zoom over large areas.

**Q: Is Fabric.js suitable for real-time collaborative editing?**
A: Yes. Serialize object state as JSON, transmit deltas over WebSocket, and apply them on remote canvases.

## Sources
- https://github.com/fabricjs/fabric.js
- http://fabricjs.com/docs/

---
Source: https://tokrepo.com/en/workflows/fabric-js-powerful-html5-canvas-library-interactive-graphics-1541c167
Author: Script Depot