Technical Specification: Free Online Canvas Image Editor

Overview

A high-performance, single-file browser application designed to provide fundamental graphic editing capabilities. The tool enables users to import images, manage multiple layers, perform basic drawing operations, and export the final composite canvas.

Core Feature Set

• Canvas Workspace: Interactive drawing surface supporting layers, transparency, and background manipulation.
• Layer Management: Add, delete, hide/show, and reorder layers via a sidebar panel.
• Drawing Tools: Brush, Eraser, and Paint Bucket tools with adjustable size, opacity, and color selection.
• Image Operations: Import images (Drag & Drop or File Picker), resize, flip, and rotate.
• History System: In-memory Undo/Redo functionality using a state stack.
• Export: Export flattened compositions as high-quality PNG or JPEG files.

UI Layout Design

• Header: Contains the App Title, 'Clear Canvas' button, and 'Export' button.
• Main Interface (Three-Column Flex Layout):
  • Left Toolbar: Houses tool selection icons (Brush, Eraser, Fill, Select, Pipette).
  • Center Canvas: The primary drawing area with a crisp, neutral background, centered within a shadow-boxed container.
  • Right Sidebar: Layer manager listing each layer with visibility toggles and drag-and-drop ordering indicators.

Color Palette (Light Mode Only)

• Primary Background: #F8FAFC (Clean, light grey/white background).
• Interface Elements: #FFFFFF for cards, #E2E8F0 for borders.
• Accent Colors: #3B82F6 (Blue) for active tools, #64748B for secondary text, #EF4444 for destructive actions (e.g., delete).
• Typography: Sans-serif, system-ui (Inter or equivalent).

Technical Implementation Directives

• Architecture: Single HTML file containing CSS and Vanilla JavaScript (ES6+).
• Storage Constraints: STRICTLY NO use of localStorage, sessionStorage, or cookies. Maintain all layer data and history in a volatile JavaScript object.
• Performance: Use requestAnimationFrame for canvas rendering and debounced event listeners for drawing operations to maintain smooth UI responsiveness.
• Interaction: Custom-built modals for any necessary prompts or warnings (do not use alert(), confirm(), or prompt()).
• Compatibility: Ensure all external resources (icons/fonts) are pulled from reliable CDNs. Avoid complex build steps.
• Responsiveness: Use CSS Flexbox and Grid to re-stack the sidebar and toolbar on smaller screens. Ensure the canvas remains centered and scalable.