The HTML-in-Canvas API origin trial

The HTML-in-Canvas API, now in an experimental origin trial, enables web developers to combine HTML and canvas elements for creating complex, interactive visual applications. This API allows developers to draw HTML content directly onto a canvas, maintaining interactivity and accessibility, while leveraging the low-level graphics performance of the Canvas element. By doing so, the API bridges the gap between the DOM's rich semantic features and the canvas's high-performance graphics capabilities.

The DOM is well-known for its text layout solutions, semantically understood content, and integration with essential browser features such as accessibility tools, translation, find-in-page, reader mode, extensions, dark mode, browser zoom, and autofill. Canvas, on the other hand, offers low-level access to drive 2D and 3D graphics, enabling games and complex web applications like Google Docs or Figma to function efficiently.

However, using the canvas alone requires developers to implement custom UI logic for responsive text, increasing bundle size and complexity.

The HTML-in-Canvas API bridges this gap by placing HTML inside a canvas element, synchronizing its transform, and ensuring that the content remains fully interactive. By leveraging the DOM within the canvas, all browser integrations function automatically, offering a seamless user experience. The API is currently available in Chrome 148 through 150 for its origin trial phase, and developers can enable it by using Chrome Canary 149 or later with the chrome://flags/#canvas-draw-element flag activated.

To register for the Origin Trial, developers can visit the relevant page and follow the instructions.

To use the API, developers must first add the layoutsubtree attribute to their canvas tag, making the browser aware of the nested HTML content. They then need to size the canvas grid according to the device scale factor to avoid blurriness. For a 2D context, the drawElementImage method is used, while texElementImage2D is employed for WebGL.

The on-screen location of an element can be computed using the element.getElementTransform() function, especially when shaders use typical model view projection. Despite its power, the API has a few conscious limitations, including the need for manual matrix updates and the inability to automatically determine the element's on-screen location for shaders.

Nonetheless, this API opens up new possibilities for web developers, allowing them to create immersive, interactive experiences that were previously unattainable.