Web Paint

01 / Project summary

A real canvas tool.

Web Paint uses Canvas 2D, vanilla JavaScript state, pointer events, flood fill, capped history, PNG import/export, localStorage, resizing, zoom, and responsive controls.

Why this matters

It makes browser drawing usable.

Production readiness

Works now; larger documents need more.

02 / What I built

Editor surface and interaction model.

• Implemented pencil, eraser, shapes, fill, text, selection, and previews.
• Built undo/redo, import validation, PNG export, local save/load, zoom, and resizing.
• Managed tool settings, colors, brush size, shapes, selection, drafts, pointer capture, and status in vanilla JS.
• Added paste, copy, cut, fullscreen, canvas sizing, mobile panels, and mobile guidance.
• Added guardrails for MIME type, size, pixels, canvas dimensions, animation-frame drawing, and history limits.

Uses browser APIs: Canvas 2D, File, Clipboard, Fullscreen, object URLs, and LocalStorage. Logic/UI are vanilla JavaScript.

03 / Tool list

Features map to drawing tasks.

04 / Canvas rendering model

Pointer input becomes canvas drawing.

1. Capture pointer pointerdown captures the pointer and start coordinate.
2. Pick behavior by tool Fill, text, selection, freehand, and shapes use separate paths.
3. Render freehand strokes Pencil, brush, and eraser draw segments with current brush settings.
4. Preview shapes from a draft Shapes restore a draft during drag, then render current geometry.
5. Commit a history snapshot On release, final pixels enter bounded undo history.

Pointer movement is throttled with requestAnimationFrame so high-frequency input stays fluid.

05 / Tool state management

A focused state object coordinates the editor.

Canvas pixels are the image source of truth; JavaScript state describes the current interaction.

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/redo use ImageData snapshots and a history index. New edits discard redo states, save latest pixels, and cap history at 24 snapshots.

The model is simple but memory-heavy on large canvases. Production would use commands, dirty regions, compression, or workers.

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 replace a backend.

1. Open image Validate MIME type and size before loading through an object URL.
2. Validate dimensions Reject missing dimensions or images over 48 million pixels.
3. Fit to canvas Scale to fit, preserve aspect ratio, center, then commit history.
4. Clipboard flow Copy/cut export canvas or selection with clipboard and download fallback.
5. Export and local save Save downloads PNG; local save stores a PNG data URL in localStorage.

08 / Keyboard, mouse, and touch

Pointer events keep input device-agnostic.

09 / Nonvisual limits and improvements

Keyboard shell; visual canvas.

The interface uses semantic buttons, labels, focus states, ARIA labels, and toolbar groups. Canvas content remains visual pixel data.

10 / Performance considerations

Large canvases drive the constraints.

Web Paint clamps canvases to 4096x4096, caps imports, uses typed-array flood fill, schedules resize previews with requestAnimationFrame, and limits history.

The main limit is full ImageData history. Production would add memory-aware limits, workers, region invalidation, import feedback, and low-memory mobile handling.

11 / Testing and QA notes

QA focuses on state, APIs, and mobile input.

12 / Deployment and run notes

Runs as a browser tool.

13 / Screenshot

Live browser-tool screenshot.

14 / What I would improve next

Next editor improvements.

• Add shortcuts for undo, redo, save, tools, zoom, and canvas movement.
• Move and resize selected regions.
• Replace prompt text with inline editable text.
• Add autosave/reopen and document names.
• Improve large-canvas memory with region or command history.