Skip to main content
Prompts HTML5 Canvas Interactive Drawing App Creator

model coding user risk: low

HTML5 Canvas Interactive Drawing App Creator

Create an interactive drawing application using HTML5 Canvas, CSS3, and JavaScript with tools including brush, pencil, shapes, text, eraser; color selection; layer support; undo/re…

PROMPT 

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.

EXPECTED OUTPUT

Format
html

SUCCESS CRITERIA

  • Create interactive drawing application using HTML5 Canvas, CSS3, JavaScript
  • Build clean interface with intuitive tool selection
  • Implement drawing tools including brush, pencil, shapes, text, eraser
  • Add color selection with recent colors, picker, palettes
  • Include layer support with opacity, blend modes
  • Implement undo/redo with history states
  • Add image import/export in PNG, JPG, SVG
  • Support canvas resizing, rotation
  • Implement zoom, pan navigation
  • Add selection tools with move, resize, transform
  • Include keyboard shortcuts

FAILURE MODES

  • May implement only basic tools without advanced features like layers or selection
  • May omit undo/redo or history states
  • May fail to support multiple export formats
  • May neglect zoom, pan, or keyboard shortcuts
  • May not handle image import properly

CAVEATS

Missing context
  • UI wireframe or layout description
  • Browser compatibility requirements
  • Performance constraints (e.g., canvas size limits)
  • Mobile responsiveness
  • Maximum layers or history depth
Ambiguities
  • 'Shapes' not specified (e.g., rectangle, circle?)
  • Blend mode options not listed
  • Keyboard shortcuts not detailed
  • 'Clean interface with intuitive tool selection' lacks layout details
  • SVG export feasibility for raster drawings unclear

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.75
REUSABILITY
0.25
COMPLETENESS
0.65

IMPROVEMENT SUGGESTIONS

  • List specific shapes: 'rectangle, circle, line, freehand polygon'.
  • Enumerate blend modes: 'multiply, screen, overlay, etc.'.
  • Specify keyboard shortcuts: 'Ctrl+Z for undo, B for brush, etc.'.
  • Add UI structure: 'Toolbar on left, color palette on right, layers panel at bottom.'.
  • Include export details: 'PNG/JPG at user-selected quality, SVG via path tracing or simple shapes.'

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL