Project 5: Multi-Tab Whiteboard

📋 Project Brief

Build a collaborative whiteboard that synchronizes drawing data across multiple open browser tabs — without any server or WebSocket connection. This project uses the Canvas API for the drawing engine and the BroadcastChannel API for inter-tab communication. You will implement a vector-based undo/redo system and explore pointer events for pressure-sensitive brush strokes.

🎯 Learning Objectives

• Master the Canvas 2D API for real-time drawing
• Use the BroadcastChannel API for inter-tab state synchronization
• Implement a command-pattern undo/redo system using path vectors
• Handle pointer events for pressure sensitivity and multi-input devices
• Export canvas content to downloadable PNG files

✅ Feature Requirements

Feature 1: Cross-Tab Sync

Acceptance Criteria:

• Open the app in two browser tabs
• Drawing in Tab A must appear in Tab B within 100ms
• Undo in Tab A must undo in Tab B
• Clearing the canvas in one tab clears all tabs
• A new tab opening must receive the current canvas state (full history replay)
• Must use BroadcastChannel API (fallback: StorageEvent on localStorage)

Feature 2: Vector History (Undo/Redo)

Acceptance Criteria:

• Every stroke is stored as an array of coordinate points, not as a bitmap
• Ctrl+Z undoes the last stroke; Ctrl+Shift+Z redoes it
• The history stack must support at least 500 operations
• Performing a new action after undoing clears the redo stack (standard behavior)
• History must persist across page refreshes (save to localStorage or IndexedDB)

Feature 3: Pressure Sensitivity

Acceptance Criteria:

• Use the PointerEvent API instead of MouseEvent
• Stroke width varies based on pointer speed (faster = thinner, slower = thicker)
• On devices with stylus support, use actual pressure data (event.pressure)
• Provide a "Fixed Width" toggle for users who prefer uniform strokes

Feature 4: Export to PNG

Acceptance Criteria:

• A "Download" button exports the current canvas as a PNG file
• The exported image must have a white background (not transparent)
• The filename must include a timestamp
• Support exporting at 2x resolution for Retina displays

Feature 5: Shape Recognition

Acceptance Criteria:

• When a user draws a rough circle, the app offers to "snap" it into a perfect circle
• Similarly for rectangles and straight lines
• The recognition must trigger only when a "Shape Mode" toggle is active
• Use simple heuristics: if start/end points are close and the path is roughly circular → snap

📊 Performance Benchmarks

Metric	Target
Drawing latency (pen to screen)	< 8ms
Cross-tab sync latency	< 100ms
Undo operation	< 16ms (full canvas redraw)
Memory for 500 strokes	< 10MB

🧪 Testing Checklist

• Unit test undo/redo stack logic (push, undo, redo, redo-clear)
• Unit test shape recognition heuristics
• Integration test: draw in Tab A, verify it appears in Tab B
• Test export produces a valid PNG with correct dimensions

🚀 Stretch Goals

• Add color picker and eraser tools
• Implement layers (draw on separate canvases stacked via CSS)
• Add a "Text" tool for placing text on the canvas
• Implement zoom and pan with scroll/pinch gestures