Comprehensive Canvas Module

A Claude Code skill for building canvas-based drawing, editing, and visualization applications using HTML5 Canvas and related libraries. Covers canvas rendering, interaction handling, layer management, export functionality, and performance optimization for drawing and editing tools.

When to Use This Skill

Choose Comprehensive Canvas Module when:

• You're building a drawing or diagramming application
• You need to implement canvas-based image editing or annotation
• You want to create interactive visualizations with custom rendering
• You need to handle complex canvas interactions (drag, resize, rotate)
• You're building a whiteboard, design tool, or annotation overlay

Consider alternatives when:

• You need 3D rendering (use a 3D workspace skill)
• You want pre-built charting (use a data visualization library)
• You need document editing (use a rich text editor skill)

Quick Start

Copy
# Install the skill
claude install comprehensive-canvas-module

# Set up a drawing canvas
claude "Create a React canvas drawing component with brush tool, eraser, color picker, and undo/redo"

# Build an annotation tool
claude "Build a canvas overlay that lets users draw rectangles, arrows, and text annotations on images"

# Implement layer management
claude "Add a layer system to my canvas app: multiple layers, opacity control, reordering, and visibility toggle"

Core Concepts

Canvas Architecture

Application Layer
├── Tool Manager (active tool, tool switching)
├── Layer Manager (add, remove, reorder, visibility)
├── History Manager (undo/redo stack)
├── Selection Manager (select, multi-select, transform)
└── Export Manager (PNG, SVG, JSON)

Rendering Layer
├── Main Canvas (visible output)
├── Offscreen Canvas (composition)
├── Hit-Test Canvas (interaction detection)
└── Overlay Canvas (selection handles, guides)

Input Layer
├── Mouse Events (click, drag, scroll)
├── Touch Events (tap, pinch, gesture)
├── Keyboard Events (shortcuts, modifiers)
└── Clipboard Events (copy, paste)

Drawing Tool Patterns

Tool	Implementation	Key Events
Brush	Path with quadratic curves	mousedown → mousemove → mouseup
Eraser	Composite operation: destination-out	Same as brush
Shape	Preview during drag, commit on release	mousedown (start) → mousemove (preview) → mouseup (commit)
Text	Create input overlay at click position	click → show input → blur → render to canvas
Selection	Bounding box with transform handles	click to select → drag corners to transform

Rendering Optimization

Technique	When to Use	Performance Gain
Dirty Rectangle	Only redraw changed areas	2-5x for small changes
Layer Caching	Cache static layers as images	3-10x for multi-layer scenes
requestAnimationFrame	Smooth animation loop	Eliminates jank
OffscreenCanvas	Heavy computation off main thread	Prevents UI blocking
Resolution Scaling	Reduce canvas resolution on slow devices	2-4x on mobile

Configuration

Parameter	Type	Default	Description
library	string	"fabric"	Library: fabric.js, konva, paper.js, vanilla
framework	string	"react"	Frontend framework
features	string[]	["draw", "select"]	Features: draw, select, layers, export, text
max_canvas_size	number	4096	Maximum canvas dimension in pixels
touch_support	boolean	true	Enable touch/gesture support

Best Practices

1. Use a library for complex interactions — Fabric.js and Konva handle selection, transformation, grouping, and serialization out of the box. Writing these from scratch with raw Canvas API takes months and introduces subtle bugs.

2. Implement undo/redo from the start — Use a command pattern where each action is a reversible command object. This is extremely hard to add later but trivial to build in from day one. Store state snapshots for complex operations.

3. Separate rendering from state — Keep your canvas objects in a data model and render from that model. This makes undo/redo, serialization, collaboration, and testing much simpler than trying to reconstruct state from canvas pixels.

4. Handle HiDPI displays — Set canvas dimensions to width * devicePixelRatio and scale the context. Without this, your canvas will look blurry on Retina and high-DPI screens.

5. Debounce heavy operations — Operations like full canvas export, history snapshots, and auto-save should be debounced. Triggering a full-canvas toDataURL() on every mousemove will freeze the application.

Common Issues

Canvas looks blurry on Retina displays — Set canvas width/height attributes to the display size multiplied by window.devicePixelRatio, then scale the CSS size back down. This gives you high-resolution rendering.

Slow performance with many objects — Switch from immediate-mode rendering (redraw everything each frame) to retained-mode with dirty tracking. Cache static layers as pre-rendered images and only redraw the active layer.

Touch events conflict with scrolling — Use touch-action: none CSS on the canvas element and call preventDefault() on touch events. But allow scrolling gestures (two-finger) to pass through for mobile usability.