Skip to main content
Prompts HTML5 Canvas Web Image Editor Builder

model coding user risk: low

HTML5 Canvas Web Image Editor Builder

Develop a web-based image editor using HTML5 Canvas, CSS3, and JavaScript with a professional interface, tool panels, preview area, basic adjustments like brightness and contrast,…

PROMPT 

Develop a web-based image editor using HTML5 Canvas, CSS3, and JavaScript. Create a professional interface with tool panels and preview area. Implement basic adjustments including brightness, contrast, saturation, and sharpness. Add filters with customizable parameters and previews. Include cropping and resizing with aspect ratio controls. Implement text overlay with font selection and styling. Add shape drawing tools with fill and stroke options. Include layer management with blending modes. Support image export in multiple formats and qualities. Create a responsive design that adapts to screen size. Add undo/redo functionality with history states.

EXPECTED OUTPUT

Format
code
Constraints
  • complete implementation
  • responsive design
  • HTML/CSS/JS only

SUCCESS CRITERIA

  • Develop a web-based image editor using HTML5 Canvas, CSS3, and JavaScript.
  • Create a professional interface with tool panels and preview area.
  • Implement basic adjustments including brightness, contrast, saturation, and sharpness.
  • Add filters with customizable parameters and previews.
  • Include cropping and resizing with aspect ratio controls.
  • Implement text overlay with font selection and styling.
  • Add shape drawing tools with fill and stroke options.
  • Include layer management with blending modes.
  • Support image export in multiple formats and qualities.
  • Create a responsive design that adapts to screen size.
  • Add undo/redo functionality with history states.

FAILURE MODES

  • May produce incomplete implementation due to extensive feature scope.
  • May overlook complex features like layer blending or undo/redo.
  • May result in non-responsive or unprofessional UI.
  • Code may lack full functionality or error handling.

CAVEATS

Missing context
  • Target browsers or compatibility requirements.
  • Performance or optimization criteria.
  • UI layout wireframes or mockups.
  • Font library or sources for text overlay.
  • Exact quality settings for exports.
Ambiguities
  • Does not specify image input/upload method.
  • Unclear what specific filters or their parameters are required.
  • No details on exact shapes for drawing tools.
  • Unsupported export formats listed.
  • Blending modes not enumerated.

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.80
REUSABILITY
0.30
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add 'Implement image upload via drag-and-drop or file picker.'
  • Specify 'e.g., grayscale, sepia, blur filters with sliders for intensity.'
  • Include 'Provide a detailed UI mockup or describe panel layouts.'
  • List 'Export as PNG, JPEG, WebP with quality slider (0-100%).'
  • Define 'Support common blending modes: normal, multiply, screen, overlay.'

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