CodingTextIntermediate

Interactive Drawing App

Build an interactive drawing app using HTML5 Canvas, CSS3, and JavaScript, with multiple tools, layers, undo/redo, and image import/export.

Prompt Content

Copy and paste directly into your model or internal evaluation tool.

Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript. Build a clean interface with intuitive tool selection. Implement multiple drawing tools including brush, pencil, shapes, text, and eraser. Add color selection with recent colors, color picker, and palettes. Include layer support with opacity and blend mode options. Implement undo/redo functionality with history states. Add image import and export in multiple formats (PNG, JPG, SVG). Support canvas resizing and rotation. Implement zoom and pan navigation. Add selection tools with move, resize, and transform capabilities. Include keyboard shortcuts for common actions.

Use Cases

Create an online drawing toolTeaching demo for drawing featuresRapid prototyping

Reference Output

A fully functional drawing app interface with toolbar, color picker, layer panel, canvas area, status bar, supporting undo/redo, zoom, pan, and image export.

Scoring Rubric

Scoring: 1. Clean layout & high usability; 2. All tools implemented without major bugs; 3. Layer & blend mode functions work; 4. Undo/redo reliable; 5. Various import/export formats; 6. Smooth zoom/pan; 7. Selection tools operable; 8. Convenient keyboard shortcuts.