DOM and Canvas: A Missing Bridge

▶ Watch (0:08)

The DOM gives users text selection, right-click save, accessibility, translate, find-in-page, reader mode, extensions, dark mode, browser zoom, and auto fill. Canvas offers low-level pixel control for 2D and 3D graphics but breaks all those features. Developers must reimplement responsive text layout and miss browser integrations. The HTML-in-Canvas API paints DOM into a 2D canvas, WebGL, or WebGPU texture while keeping interactivity and browser features hooked up.

Three Steps to Render HTML in Canvas

▶ Watch (3:35)

First, set the layout subtree property on the canvas tag to enable hit testing and accessibility. Then, write HTML inside the canvas tags, either static or via JavaScript. Finally, call drawElementImage for 2D contexts or texElementImage2D for WebGL or copyElementImageToTexture for WebGPU. Apply the returned CSS transform to the DOM element so the browser knows its position. Frameworks like Three.js and PlayCanvas abstract this into one method: three.htmlTexture().

Browser Features Survive Inside Canvas

▶ Watch (9:45)

Demos show text rendered in canvas with right-click save, image drag, and SVG animation. A WebGL slider and input remain interactive; inspect in DevTools highlights the DOM element. CSS dark mode updates the UI automatically. Find-in-page highlights text inside a 3D model. Browser translate converts a 3D book’s text to German. Accessibility tree exposes all content, scoring 100 in Lighthouse.

Frameworks and Production Path

▶ Watch (7:26)

Three.js and PlayCanvas have experimental support for the API. Three.js provides a three.htmlTexture() method; PlayCanvas creates a texture from a DOM element with an event listener for repaints. Both frameworks handle the 3D-to-CSS coordinate transform. Figma, Adobe, Miro, and JetBrains are prototyping with the API. It has been available in origin trial since May 2026. Developers must sign up and include a polyfill fallback for browsers without the API.

Notable Quotes

All the demos that you see here are using the HTML that you know and hopefully love in ways that you never thought possible. Thomas Nattestad · ▶ Watch (0:26)

The HTML in canvas API is the bridge that gives you the best of both worlds by letting you paint DOM elements into a canvas or WebGPU texture. Thomas Nattestad · ▶ Watch (3:03)

It’s vital that you update this transform whenever you repaint the element. Thomas Nattestad · ▶ Watch (5:28)

And then because it’s all just hooked up through DevTools, I can even right click on this and say inspect to see this UI right here. Thomas Nattestad · ▶ Watch (10:47)

Even in this early stage of the API, it’s already getting some amazing apps like Figma, Adobe, Miro, and JetBrains Thomas Nattestad · ▶ Watch (15:08)

Key Takeaways

  • HTML-in-Canvas API preserves all browser features inside canvas-rendered UI.
  • Three.js and PlayCanvas offer experimental integration for 3D scenes.
  • Origin trial available in Chrome since May 2026; sign up to deploy.