Codakey
Play
← Back to kangax/fabric.js

How to Deploy & Use kangax/fabric.js

Fabric.js Deployment and Usage Guide

Prerequisites

Runtime Requirements

  • Node.js: Minimum version 18 (LTS versions strongly recommended)
  • Browser Support: Modern browsers only (IE11 and Edge Legacy not supported)
    • Firefox 58+
    • Safari 11+
    • Chrome 64+
    • Edge (Chromium-based)
    • Opera (Chromium-based)

Development Tools

Installation

Via npm/yarn/pnpm

# Using npm
$ npm install fabric --save

# Using yarn
$ yarn add fabric

# Using pnpm
$ pnpm install fabric

Browser CDN

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/fabric@6.4.3/dist/index.js"></script>

<!-- From cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/6.4.3/fabric.min.js"></script>

Node.js

# Install dependencies
npm install fabric
npm install canvas # node-canvas for canvas implementation
npm install jsdom # for window implementation in Node.js

Configuration

Environment Variables

No specific environment variables are required for basic usage.

API Keys

No API keys are required for Fabric.js core functionality.

Node.js Configuration

For Node.js usage, ensure node-canvas is properly configured:

  • Follow platform-specific installation instructions
  • Install system dependencies (Cairo, Pango, etc.) as required by your platform

Build & Run

Browser Usage

<canvas id="canvas" width="300" height="300"></canvas>

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

ES6 Modules (Browser)

import { Canvas, Rect } from 'fabric';

const canvas = new Canvas('canvas');
const rect = new Rect({
  top: 100,
  left: 100,
  width: 60,
  height: 70,
  fill: 'red',
});
canvas.add(rect);

React.js Integration

import React, { useEffect, useRef } from 'react';
import * as fabric from 'fabric';

export const FabricJSCanvas = () => {
  const canvasEl = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    const canvas = new fabric.Canvas(canvasEl.current);
    // Your canvas setup here
    return () => {
      canvas.dispose();
    }
  }, []);

  return <canvas width="300" height="300" ref={canvasEl}/>;
};

Node.js Usage

import http from 'http';
import * as fabric from 'fabric/node';

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();
    
    // Handle requests...
  })
  .listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });

Deployment

Static Website Deployment

Fabric.js is ideal for static deployments. Recommended platforms:

  • Vercel - Excellent for React/Vue/Svelte apps
  • Netlify - Great for static sites with build steps
  • GitHub Pages - Simple hosting for documentation/demo sites

Node.js Application Deployment

For server-side canvas rendering, deploy to:

  • Heroku - Easy Node.js deployment with buildpacks
  • AWS Lambda (with Node.js runtime) - Serverless canvas generation
  • DigitalOcean App Platform - Managed Node.js hosting
  • Railway - Modern Node.js deployment with built-in canvas support

Docker Deployment

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 8080
CMD ["node", "server.js"]

Troubleshooting

Common Issues

1. Node Canvas Installation Failures

Problem: node-canvas fails to install on Windows/Linux Solution:

  • Ensure all system dependencies are installed (Cairo, Pango, etc.)
  • For Windows: Install GTK+
  • For Ubuntu/Debian: sudo apt-get install libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
  • For macOS: brew install cairo pango libpng jpeg giflib librsvg

2. Canvas Not Displaying in Browser

Problem: Canvas appears blank or elements don't render Solution:

  • Check browser console for errors
  • Ensure canvas element has explicit width/height attributes
  • Verify Fabric.js is loaded before canvas initialization
  • Check for CSS conflicts that might affect canvas dimensions

3. Memory Leaks in Long-running Applications

Problem: Memory usage grows over time Solution:

  • Call canvas.dispose() when canvas is no longer needed
  • Remove event listeners properly
  • Clear canvas objects when appropriate: canvas.clear()

4. SVG Import/Export Issues

Problem: Complex SVGs don't render correctly Solution:

  • Use the reviver function for custom SVG parsing
  • Check for unsupported SVG features
  • Simplify complex paths before import

5. Performance Issues with Large Canvases

Problem: Slow rendering with many objects Solution:

  • Use object grouping for related elements
  • Implement viewport culling for large scenes
  • Consider canvas size optimization based on display density

6. Browser Compatibility Issues

Problem: Features not working in older browsers Solution:

  • Fabric.js only supports modern browsers (no IE11/Edge Legacy)
  • Use feature detection before enabling advanced features
  • Consider polyfills for specific canvas APIs if needed

Getting Help

← Project overviewView alternatives to kangax/fabric.js →