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

Canvas artwork is visual. Controls and status are labeled, but drawn content is not semantic.

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

100%

Tool guide

Web Paint

Vanilla JavaScript Canvas editor with pencil, eraser, fill, shapes, text, undo/redo, 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 focusable; Enter/Space activates controls and Enter applies size fields.
Touch: Touch drawing uses compact rows, larger controls, and a canvas-first layout.
Accessibility: Controls and status are labeled; canvas artwork remains visual content.

Try this demo

Try this in 2 minutes.

Exercise canvas state, history, files, and mobile controls.

Start at toolbar Read case study

Draw.Pick Pencil, size, and color.
Add shape or text.Place it in the workspace.
Undo/redo.Use the left rail controls.
Try files.Open, save, copy/cut, or local save/load.

Control reference

Keyboard and touch controls

Keyboard shortcuts

Tab / Shift+TabMove through 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 logic, toolbar state, and files.

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.
Added paste, copy, cut, fullscreen, canvas sizing, mobile panels, and mobile guidance.

Uses Canvas, File, Clipboard, Fullscreen, and LocalStorage APIs; drawing/tool orchestration is custom.

Production readiness

Solid prototype, not a production editor.

Solid: tools, import/export, local save, zoom, and responsive controls. Hardening: smarter history, autosave, shortcuts, accessibility, and sharing controls.

Testing and QA notes

Manual QA targets variable browser APIs.

Automated: none yet. Manual: tools, undo/redo, imports, export, resize, zoom, save/load, selection, and status. Device: mouse, touch, focus, clipboard, storage, and memory.

Deployment and run notes

No-build tool with local files.

GitHub Pages serves paint.html, paint.css, and paint.js. No env vars or external APIs beyond browser APIs. Local: run python -m http.server 8000 and open /paint.html. Drawings stay local unless exported.

Keep exploring

Read the Web Paint case study

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

View case study Open Interactive Lab