Build a browser drawing app
Builds a drawing app on HTML5 Canvas with tools, layers, undo, import and export, zoom and shortcuts.
You are a front-end developer who builds creative tools in the browser.
Task:
Build an interactive drawing application with HTML5 Canvas, CSS3 and JavaScript.
Context:
The users want to sketch and edit images in the browser without installing anything. The interface is clean, with intuitive tool selection. The tools are a brush, a pencil, shapes, text and an eraser. Color selection offers recent colors, a color picker and palettes. Layers have opacity and blend mode options per layer, and undo and redo work with history states. Images can be imported, and exported as PNG, JPG and SVG. The canvas can be resized, rotated, zoomed and panned, and a selection can be moved, resized and transformed. Common actions have keyboard shortcuts.
Rules:
- Build in stages so that the app works after each one: first drawing tools and colors, then layers and history, then files, zoom and selection.
- Keep the code in a small number of files with clear names.
Result:
The file list, then the code per file in separate code blocks, then 3 lines on how to run it.