Web Paint

01 / Project summary

A real canvas tool, not only a visual mockup.

A browser drawing editor needs predictable tool state, durable history, safe imports, and export paths that work without a backend. I built Web Paint with the Canvas 2D API, vanilla JavaScript state, pointer events, typed-array flood fill, capped ImageData history, PNG import/export, localStorage save/load, canvas resizing, zoom, and a desktop-inspired toolbar that still works at narrow widths.

Why this matters

It makes a browser-only drawing tool feel usable.

Production readiness

The editor works; larger documents need a more robust model.

02 / What I built

The full editor surface and interaction model.

• Implemented Canvas drawing modes for pencil, eraser, shapes, fill, text, selection, and preview rendering.
• Built undo/redo snapshots, image import validation, PNG export, local save/load, zoom, and canvas resizing.
• Managed tool settings, colors, brush size, shape choices, selection bounds, drawing drafts, pointer capture, and status output in vanilla JavaScript.
• Added paste, copy, cut, fullscreen, canvas-size controls, mobile-friendly control panels, and mobile instruction copy.
• Included guardrails for MIME type, file size, pixel count, bounded canvas dimensions, requestAnimationFrame-based drawing, and large-canvas history limits.

External pieces are browser APIs: Canvas 2D, File input, Clipboard, Fullscreen, object URLs, and LocalStorage. The editor logic and UI wiring are vanilla JavaScript in this repo.

03 / Tool list

Editor features map to drawing tasks.

04 / Canvas rendering model

Pointer input is converted into canvas-space drawing.

1. Capture pointer pointerdown sets pointer capture, stores the current canvas rectangle, and calculates the starting canvas-space coordinate.
2. Pick behavior by tool Fill, text, selection, freehand drawing, and shape drawing take different paths instead of trying to force all tools through one handler.
3. Render freehand strokes Pencil, brush, and eraser draw line segments from the previous point to the latest point, using the current brush configuration.
4. Preview shapes from a draft Shape drawing stores an ImageData draft at pointer start, restores it during drag, then renders the current geometry on top.
5. Commit a history snapshot On pointer release, the final canvas pixels are saved into bounded undo history so future edits can restore a known image state.

Continuous pointer movement is throttled through requestAnimationFrame with a pending point, which keeps drawing fluid under pen/mouse input while avoiding unnecessary repeated work during high-frequency pointer events.

05 / Tool state management

A focused state object coordinates the editor.

The important choice is that the canvas pixels remain the source of truth for the image, while JavaScript state describes the current interaction. That keeps the implementation understandable without a component framework.

function setTool(tool) {
  if (tool !== "select") clearSelection();
  state.activeTool = tool;
  state.activeShape = "";
  toolStatus.textContent = `Tool: ${titleCase(tool)}`;
  syncActiveControls();
}

06 / Undo and redo strategy

History stores bounded ImageData snapshots.

Undo and redo are implemented with an array of ImageData snapshots and a history index. Before saving a new edit, the app slices away any redo states after the current index, pushes the latest pixels, and caps the stack at 24 snapshots. Restoring a state uses putImageData.

This direct snapshot model works for a small editor because every tool produces a final pixel state. The tradeoff is memory: large canvases make each snapshot expensive. A production version would likely move toward command history, dirty-region snapshots, compression, or worker-backed persistence for bigger documents.

function saveHistory() {
  state.history = state.history.slice(0, state.historyIndex + 1);
  state.history.push(context.getImageData(0, 0, canvas.width, canvas.height));
  if (state.history.length > maxHistory) state.history.shift();
  state.historyIndex = state.history.length - 1;
}

function restoreHistory(index) {
  const snapshot = state.history[index];
  if (!snapshot) return;
  context.putImageData(snapshot, 0, 0);
}

07 / Import and export flow

Browser APIs make the tool work without a backend.

1. Open image The hidden file input accepts common image types. JavaScript validates MIME type and file size before loading the image through an object URL.
2. Validate dimensions Imported images with no dimensions or more than 48 million pixels are rejected before they are drawn onto the canvas.
3. Fit to canvas The image is scaled to fit the current canvas while preserving aspect ratio, centered on a white background, then committed to history.
4. Clipboard flow Copy and cut export either the full canvas or the current selection with toBlob and ClipboardItem, with download fallback when clipboard writing is unavailable.
5. Export and local save Save downloads a PNG. Local save stores a PNG data URL in localStorage, enough for this browser tool but not a full document system.

08 / Keyboard, mouse, and touch

Pointer events keep the drawing model device-agnostic.

09 / Nonvisual limits and improvements

The shell is keyboard-friendly, but canvas content needs a deeper strategy.

The interface uses semantic buttons, labels, visible focus states, ARIA labels for icon-only controls, and descriptive toolbar groups. The canvas itself has a label, but the drawing content is still visual pixel data with no equivalent structured representation.

10 / Performance considerations

Large canvases make memory and pixel work the main constraints.

Web Paint already clamps canvases to 4096 by 4096 pixels, caps imports by file size and pixel count, runs flood fill with typed arrays, schedules resize preview work through requestAnimationFrame, and limits history to 24 snapshots.

The biggest limitation is that undo/redo stores full ImageData snapshots. At large dimensions, every snapshot can consume significant memory, and operations such as flood fill or full-canvas history save can become expensive. A production version would add memory-aware history limits, offscreen canvas or worker processing, region-based invalidation, progressive import feedback, and stronger handling for low-memory mobile devices.

11 / Testing and QA notes

QA focuses on canvas state, browser APIs, and mobile input.

12 / Deployment and run notes

Web Paint runs as a browser tool.

13 / Screenshots and captures

Screenshots from the live browser tool.

Capture pending Import / export GIF

Capture pending Undo / redo GIF

14 / What I would improve next

The next pass would make it more editor-like.

• Add real keyboard shortcuts for undo, redo, save, tool selection, zoom, and canvas movement.
• Support moving and resizing a selected region after it is created, rather than only copy/cut/export behavior.
• Replace prompt-based text placement with an inline text box and editable text commit flow.
• Add a better autosave/reopen story, including restored local drawings and explicit document naming.
• Improve memory behavior for large canvases with region-based history or a command-style undo stack.
• Add short GIFs for import/export, undo/redo, and shape preview after the interaction polish is finalized.