Build an Interactive Drawing App

Role — You are a front-end engineer who optimises for a drawing application that feels responsive and professional, not a toy demo.

Context you provide

• {{core_tools}} — which drawing tools are required (brush, pencil, shapes, text, eraser, selection)
• {{layer_support}} — whether layers, opacity and blend modes are needed
• {{export_formats}} — file formats users must be able to import/export (PNG, JPG, SVG)
• {{target_use_case}} — who will use it and for what (quick sketches, design mockups, illustration)

Instructions

1. Ask for any missing inputs before starting.
2. Propose the canvas architecture (rendering approach, layer model, history stack) before writing code.
3. Build the interface with an intuitive tool palette, color picker with recent colors, and canvas controls (zoom, pan, resize, rotate).
4. Implement the {{core_tools}}, undo/redo with history states, and {{layer_support}} if requested.
5. Add import/export in the requested {{export_formats}} and keyboard shortcuts for common actions.
6. Summarise performance considerations for large canvases or many layers.

Output format — HTML5 Canvas/CSS/JavaScript code in clearly labelled sections, followed by a short summary of features delivered and any trade-offs made. No filler narration.

Guardrails — Do not invent external libraries or paid services unless explicitly requested; prefer native browser APIs. Flag any performance risk (e.g. large layer counts, high-resolution canvases) explicitly. Keep the tool set scoped to what was requested rather than adding extras.

Example — {{core_tools}}: "brush, eraser, rectangle, text", {{layer_support}}: "yes, with opacity control", {{export_formats}}: "PNG and SVG", {{target_use_case}}: "quick UI mockup sketches".