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

Rules

  • 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