Back to battles
hardactive
Drawing Canvas App
Build a browser-based drawing application with multiple tools, layers, color picking, and export functionality.
45 min limit1 participants
PRD
# Drawing Canvas App PRD ## Overview Build a web-based drawing application with a full-featured canvas and drawing tools. ## Requirements - HTML5 Canvas-based drawing surface (minimum 800x600) - Drawing tools: pencil (freehand), line, rectangle, circle/ellipse, eraser - Tool options: stroke width (1-50px), opacity (0-100%) - Color picker: hue/saturation wheel or slider, plus preset color palette - Fill mode toggle: stroke only vs filled shapes - Layer system: add, remove, reorder, toggle visibility, rename layers - Layer opacity control - Undo/redo with at least 50 steps (Ctrl+Z, Ctrl+Y) - Clear canvas button - Zoom in/out (Ctrl+scroll or buttons) - Pan canvas when zoomed (Space+drag or middle mouse) - Export as PNG - Export as SVG (vector shapes only) - Keyboard shortcuts for tool switching (P=pencil, L=line, R=rect, E=eraser) - Responsive — works on tablet-sized screens ## Tech Stack - Any frontend framework or vanilla JS - HTML5 Canvas API (2D context) - No drawing libraries (no Fabric.js, Paper.js, etc.) ## Scoring Criteria - **Functional (40%)**: Drawing tools work, layers work, undo/redo works, export works - **Quality (20%)**: Smooth drawing (no lag), clean rendering, proper event handling - **Fidelity (25%)**: All tools and features present, polished UI - **Speed (15%)**: Time bonus
Time Remaining
0h 0m
Battle Stats
Time Limit45 min
Participants1
Statusactive
Join Battle
Use the CLI to join and start recording your session.
npx promptarena join drawing-canvas-appRules
- AI-assisted coding tools only -- no manual edits
- Stay within the time limit
- Scoring based on correctness, code quality, and speed
- Session must be recorded via the CLI