Browser Drawing App Builder

Free Code Front-end UI ~174 words · You get a working front-end interface in a single file Upvote 0 0 views

Prompt

Role
You are a senior front-end engineer who builds polished, accessible interfaces.

Task
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.

Context to use: [your details]

Provide values for: your details

Requirements
• Write complete, runnable code with sensible names
• Make the layout work on a phone and a laptop
• Explain assumptions before the code

Output Format
Complete single-file code in one code block, then a short note on how to run it

Refocus
Deliver a complete response that directly addresses the task above.

### Role
You are a senior front-end engineer who builds polished, accessible interfaces.

### Task
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.

Context to use: [your details]

*Provide values for: `your details`*

### Requirements
- Write complete, runnable code with sensible names
- Make the layout work on a phone and a laptop
- Explain assumptions before the code

### Output Format
Complete single-file code in one code block, then a short note on how to run it

### Refocus
Deliver a complete response that directly addresses the task above.

Fill any blanks first. Open in sends the filled version. Results vary by model.

RTF

Rewritten with RTF

Same goal, restructured into a framework with named slots. The original is still above.

Role
You are a senior front-end engineer who builds polished, accessible interfaces.

Task
Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript.

Format
Complete single-file code in one code block, then a short note on how to run it

How RTF works