Bridging the Gap Between DOM and Canvas

Traditionally, developers faced a trade-off: use the DOM for rich, accessible, and interactive UI, or use Canvas/WebGL/WebGPU for high-performance, low-level graphics. When UI is rendered into a canvas, it typically loses essential browser features like text selection, accessibility trees, find-in-page, autofill, and dark mode. The HTML-in-Canvas API resolves this by allowing developers to paint DOM content into a canvas texture while keeping the underlying elements live and connected to the browser's rendering engine.

Implementation Workflow

The API works by treating the HTML inside a <canvas> tag as a live, interactive subtree. The process involves three primary steps:

  1. Setup: Apply the layout-subtree property to the canvas element. This signals the browser to treat the canvas content as part of the accessible DOM tree.
  2. Rendering: Use specific API calls based on the context:
    • 2D Context: Use drawElementImage(element, x, y) within the onpaint event.
    • WebGL: Use textElementImage2D(element) to map the DOM element to a texture.
    • WebGPU: Use copyElementImageToTexture(element) to handle the transfer.
  3. Transform Synchronization: Because the canvas is a pixel grid, you must manually update the CSS transform property of the DOM element to match its position within the 3D or 2D space. This ensures that hit-testing, accessibility, and browser interactions (like right-clicking to save an image) remain functional.

Practical Advantages and Use Cases

By keeping the UI as standard HTML/CSS, developers gain several immediate benefits:

  • Accessibility & SEO: Screen readers and search crawlers can parse the content inside the canvas as standard text.
  • Browser Integration: Features like browser-native translation, dark mode, and 'find-in-page' work automatically without custom logic.
  • Framework Support: Libraries like Three.js and PlayCanvas have already introduced experimental support, simplifying the integration of HTML textures into 3D meshes.
  • AI Compatibility: Because the content remains in the DOM tree, AI agents and crawlers can easily extract and index the text, which is often impossible with traditional pixel-based canvas rendering.