HTML in Canvas: Embed DOM for Whimsical Canvas UIs

Unlock Canvas UIs with HTML's Strengths

Canvas excels at custom interactions impossible in CSS—like particle effects, 3D scenes, or playful animations (e.g., eyes tracking the cursor, pinball unsubscribe flows, virtual desktop with beer)—but struggles with complex text, forms, and layouts. You rebuild these manually, sacrificing accessibility, internationalization, performance, and render quality that HTML handles natively. HTML in Canvas fixes this by letting you drop real DOM elements as children of a , treating them as layout participants via the layout-subtree attribute. They join the accessibility tree, receive focus, and stay invisible on-screen while generating live textures for the canvas.

Result: Full HTML fidelity in canvas scenes. Elements update automatically via paint events when DOM changes (e.g., ticking clocks, dynamic tables), or trigger manual repaints like requestAnimationFrame. Privacy safeguards block fingerprinting risks by excluding system colors, themes, visited links, and grammar markers during texture capture.

Render HTML as Interactive Canvas Textures

To integrate:

1. Nest target HTML (e.g., timetable div, form) as direct child of —it acts as fallback if canvas fails.
2. Add layout-subtree to : <canvas layout-subtree>...</canvas>. Element now layouts off-screen but inspectable.
3. Capture as texture:
   • Basic 2D: context.drawElementImage(element, x, y, width, height).
   • WebGL/Three.js: textElementImage2D(glTexture, {colorSpace: 'srgb'}, element)—pass existing texture, GPU options, and document.getElementById('board').

In a Three.js tube station scene, replace a static image with a live timetable: clock ticks, times update in real-time as texture. Hover inspect shows invisible off-screen render, confirming screenshot-like capture on DOM paints.

WebGPU variant: copyElementImage for effects like jelly sliders over interactive inputs—user drags a gooey div, but underlying form handles events seamlessly.

Trade-offs: Experiment Delivers Fun Despite Rough Edges

Inspired by Matt Rothenberg's Twitter post sparking demos (Wes Bos pinball/virtual PC, AA finger gun), enable in Chrome Canary via flag for immediate testing. GitHub proposal details basics.

Gains: Whimsy at scale—YouTube subscribe animations, functional beauty without CSS hacks. Enables production UIs like 3D-embedded tables.

Costs: Experimental perf hit (wonky), visual desync (drawImage lags one frame behind DOM), crashes on canvas-child scrollbars. Ideal feedback stage—proposal addresses via iterative fixes.

Push for standardization: Combines canvas creativity with DOM reliability, countering AI-one-shot sites with handcrafted delight.