The Complete Production SOP: How to Deploy and Run Fabric.js Interactive Canvas Object Manipulation in Autonomous AI Agents

---
name: "fabricjs-interactive-canvas-objects"
description: "Build interactive graphic design editors with selectable, draggable canvas objects."
metadata:
  author: "Fabric.js"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create fabric.js canvas"
  - "make objects draggable canvas"
  - "export fabric canvas to svg"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

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

export const CanvasEditor: React.FC = () => {
  const canvasEl = useRef<HTMLCanvasElement | null>(null);
  const fabricRef = useRef<fabric.Canvas | null>(null);

  useEffect(() => {
    if (!canvasEl.current) return;
    const canvas = new fabric.Canvas(canvasEl.current, {
      selection: true,
      preserveObjectStacking: true,
      width: 800,
      height: 600
    });
    fabricRef.current = canvas;

    return () => {
      canvas.dispose();
    };
  }, []);

  return <canvas ref={canvasEl} />;
};

Skill Trigger: create fabric.js canvas
Task: Scaffold an interactive graphic design editor where users can drag, scale, and rotate rectangles and text.
Requirements: Implement SVG export via canvas.toSVG() and freehand drawing toggle using canvas.isDrawingMode.

import { describe, it, expect } from 'vitest';
import * as fabric from 'fabric';

describe('Fabric Canvas Serialization', () => {
  it('should export valid SVG representation', () => {
    const canvas = new fabric.StaticCanvas(null, { width: 400, height: 400 });
    const rect = new fabric.Rect({ left: 50, top: 50, width: 100, height: 100, fill: 'red' });
    canvas.add(rect);
    const svg = canvas.toSVG();
    expect(svg).toContain('<svg');
    expect(svg).toContain('fill="red"');
  });
});