DOM
Semantic, indexable, responsive
Experimental web platform field guide
Put the DOM
inside the canvas.
Real HTML as a canvas texture—still selectable, searchable, accessible, and interactive. Explore the API through original, progressive-enhancement demos.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
Checking browser capability…
Runtime
Inspecting this browser
Testing CanvasRenderingContext2D
The premise
No longer a choice between meaning and pixels.
Canvas gives us low-level visual control. The DOM gives us language, forms, accessibility, selection, and browser-native behavior. The experimental API creates a bridge: draw an element, then tell the browser where its interactive surface landed.
Canvas
Programmable, spatial, GPU-ready
Native UI texture
One surface, both capability sets
Live experiments
Three ways to think beyond the rectangle.
Each study isolates one idea: native rendering, spatial transformation, and graceful fallback.
Experiment 01
API LAB
Interactive control surface
A real form is painted into Canvas 2D. In a supporting browser, the input remains focusable and editable. Everywhere else, the same interface stays usable as ordinary HTML.
- Native input semantics
- Device-pixel aware
- DOM fallback
DOM fallback · available everywhere
Experiment 02
CANVAS 2D
Pixel lens
Move through a field of live pixels. This compatible study previews the kind of optical treatment a DOM texture can enter.
Experiment 03
DOM + MOTION
Spatial stack
Tilt a semantic card stack in 3D. It models the transform handoff needed to keep hit targets aligned with rendered pixels.
DOMMatrix
Viewport × MVP × Normalization
Interactive surface aligned
↗
API anatomy
The smallest useful implementation.
The core loop is compact. The architectural consequences are the interesting part.
1<canvas id="scene" layoutsubtree>
2 <form id="controls">
3 <label>Intensity</label>
4 <input type="range" />
5 </form>
6</canvas>
The attribute is the handshake.
layoutsubtree tells the browser to lay out
descendants of the canvas and expose them to accessibility
systems.
Field notes
What survives the trip into pixels?
Text stays text
Select it, copy it, translate it, and find it in-page.
Inputs stay native
Forms retain focus, editing behavior, and browser integrations.
Pixels get spatial
Send the result through 2D Canvas, WebGL, or WebGPU.
Meaning stays visible
Assistive tech, crawlers, and agents can inspect the DOM.