Skip to main content

ZB Zac Batten Inefy interactive lab / Web Paint

Interactive Lab

Back to Interactive Lab / Web Paint

Web Paint browser canvas drawing tool

Mobile: swipe the compact toolbar, choose a tool, then draw with one finger. Use Hide tools for more canvas space.

File

Clipboard

Tools

Brush Size

Shapes

Colors

Width Height

Canvas Size

View

Canvas

Width Height

Canvas Size

Tool: Pencil ✣ 0, 0px ▣ 1024 × 768px ▰ Layer 1 Web Paint ready.

100%

Tool guide

Web Paint

Browser drawing tools become frustrating when state and history are unreliable; I built a vanilla JavaScript Canvas editor with pencil, eraser, fill, shapes, text, undo/redo snapshots, import/export, zoom, and local save.

Status: Live demo / frontend prototype
Last updated: May 2026

Back to Interactive Lab

Controls: Choose a tool, brush size, shape, and color, then draw directly on the canvas.
Keyboard: Toolbar buttons are keyboard focusable; Enter or Space activates controls and Enter applies canvas size fields.
Touch: Touch drawing is supported with compact mobile rows, larger controls, and a canvas-first layout.
Accessibility: Tool buttons, size inputs, zoom controls, and status readouts are labelled; canvas artwork itself remains visual content.

Control reference

Keyboard and touch controls

Keyboard shortcuts

Tab / Shift+TabMove through toolbar commands, tools, swatches, zoom, and canvas controls.
Enter / SpaceActivate the focused button, tool, shape, swatch, or command.
Enter in size fieldsApply the typed canvas width and height.
Resize handle + ArrowsResize by 16 pixels; hold Shift for 128-pixel steps.

Touch and pointer controls

One-finger drawDraw, erase, fill, select, or place shapes with the active tool.
Toolbar scrollSwipe the compact toolbar rows to reach commands on narrow screens.
Hide toolsUse the header button to give the canvas more vertical room.
Resize handleDrag the handle at the canvas corner to resize visually.

What I built

Canvas editor logic, toolbar state, and local file workflows.

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.

This page uses standard browser Canvas, File, Clipboard, Fullscreen, and LocalStorage APIs; the drawing/tool orchestration is custom site code.

Production readiness

Solid static prototype, not a production editor.

Already solid covers drawing tools, import/export, local save, zoom, and responsive controls. Prototype-only areas include full-canvas ImageData history, prompt-based text placement, limited keyboard shortcuts, and no semantic representation of canvas content. Real-user hardening would add memory-aware history, autosave recovery, richer shortcuts, stronger accessibility output, wider browser testing, and privacy controls if cloud storage or sharing were added.

Testing and QA notes

Manual QA targets the browser APIs most likely to vary.

Automated tests: no dedicated test suite exists yet for this canvas tool. Manual checks: draw with every tool, test undo/redo, import invalid and large images, copy/cut/save/export, resize/zoom/fullscreen, local save/load, selection states, and status announcements. Browser/device checks: verify desktop mouse, mobile touch, keyboard focus, clipboard fallbacks, blocked LocalStorage, and large-canvas memory limits. Known limitations: no pixel-regression tests, pointer-event replay, or stronger nonvisual representation of canvas content yet.

Deployment and run notes

No-build static tool with local-only user files.

Hosted/run location: GitHub Pages serves paint.html, paint.css, and paint.js; all drawing work happens in the browser. Environment/config: no environment variables are required. External APIs/services: none beyond browser APIs such as Canvas, Pointer Events, File input, Clipboard, Fullscreen, object URLs, and LocalStorage. Local development: run python -m http.server 8000 from the repo root and open /paint.html. Security/privacy: drawings stay local unless the user exports them; future sharing would require authenticated storage and upload validation.

Keep exploring

Read the Web Paint case study

See how this tool demonstrates canvas state, pointer input, toolbar UI, local save/load, and export workflows.

View case study Open Interactive Lab