A test bench for each primitive and preserved browser behavior in the experimental HTML-in-Canvas proposal. Native paths activate when the API exists; every lab includes a runnable compatibility path.
drawElementImage()Paint a direct DOM child into Canvas 2D and keep its input interactive.
layoutsubtree → paint → transformcanvas.onpaint = () => {
ctx.reset();
const matrix = ctx.drawElementImage(form, 32, 24);
form.style.transform = matrix.toString();
};Map HTML to a GPU texture and animate it on a perspective surface.
gl.texElementImage2D(
gl.TEXTURE_2D, gl.RGBA, htmlElement, {}
);Copy a semantic DOM panel into a GPU texture with a Canvas 2D fallback.
device.queue.copyElementImageToTexture(
{ source: panel },
{ destination: { texture }, width, height }
);Transfer a captured DOM snapshot to a worker. The compatibility path runs the same live chart fully off the main thread.
const image = canvas.captureElementImage(source);
worker.postMessage({ elementImage: image }, [image]);Change a child, inspect changedElements, then request another paint.
Move the surface, then prove its nested hit target still lands correctly.
Resize the CSS surface while its backing store tracks physical pixels.
Force both enhancement tiers without changing the semantic source.
Switch one semantic message between multiline Latin, Arabic RTL, and vertical Japanese layout.
Interfaces keep their language, rhythm, and meaning.
Use browser-native input, validation, select, focus, and output behavior.
Drag across the phrase, copy it, paste below, or open the native context menu.
Pixels are temporary. Meaning survives.
Operate by keyboard and inspect the same labels a screen reader receives.
Copy the beacon, press Ctrl/Cmd+F, and find real DOM text inside the experience.
Extract the heading, description, link, and structured-data type exactly as a crawler can.
Semantic content remains inspectable beyond its pixels.
Read technical notesWaiting to inspect DOM…
Simulate a text-replacement extension and watch the DOM-driven surface update.
Change a CSS custom property, then inspect #devtoolsTarget. Computed styles and semantic source remain ordinary DOM.
Change --inspect-accent in DevTools.
| Capability | Native primitive | Runnable proof | Fallback |
|---|---|---|---|
| Canvas 2D | drawElementImage | Interactive control | Semantic form |
| WebGL | texElementImage2D | Animated texture | Generated GPU texture |
| WebGPU | copyElementImageToTexture | Texture copy | Canvas 2D renderer |
| Worker rendering | captureElementImage | Offscreen chart | Worker-generated pixels |
| Paint lifecycle | paint / requestPaint | Invalidation counter | Simulated event log |
| Layout + hit testing | getElementTransform | Transform target | DOMMatrix CSS |
| Physical sizing | ResizeObserver | DPR readout | Scaled backing grid |
| Browser integrations | Semantic DOM | Eight browser labs | Native DOM |
The proposal is still moving. Use these labs to test a browser build, inspect fallbacks, and report findings against the living explainer.
Open the WICG explainer ↗