- It allows rendering DOM elements directly in Canvas 2D, WebGL, and WebGPU contexts.
- It maintains native interactivity, accessibility for screen readers, and search engine indexing.
- It eliminates the need to use external screenshot libraries to integrate web interfaces into complex graphical environments.
For a very long time, those of us dedicated to web development have been forced to choose between two rather rigid paths when building powerful visual applications. We either relied on the DOM to take advantage of its semantic structure and accessibility, or we dove headfirst into the canvas element to gain raw performance in low-level graphics. Basically, it was a choice between structural convenience or visual power , with no middle ground.
But this is where the experimental HTML-in-Canvas API comes in, already available through source testing. This tool is a real gem because it allows us to paint DOM content directly onto a 2D canvas or even WebGL and WebGPU textures, but with one crucial detail: the interface remains interactive and accessible . There's no need to choose sides anymore, because now we can merge the best of both worlds to create experiences that until recently were simply impossible to program.
The eternal dilemma: DOM versus Canvas
To understand why this is a paradigm shift, we need to look at what each element brings to the table. The DOM is the foundation of the web; it provides ready-made text layout solutions and allows users to perform natural actions, such as selecting text to copy or right-clicking an image to save it. Furthermore, it works seamlessly with accessibility tools, reading mode, browser extensions, and zoom.
On the other hand, Canvas (and its older siblings WebGL and WebGPU) gives us complete control over every pixel, which is vital for games or very demanding applications like Figma or Google Docs. The problem is that, being essentially a grid of pixels, anything we put inside it is trapped in a static image . If you wanted responsive text, you had to program all the logic from scratch, which inflated the code size and completely broke any native browser functionality.
What do we gain by putting the DOM into the Canvas?
The HTML-in-Canvas API acts as that necessary bridge. By placing HTML within the canvas and synchronizing its transformation, we achieve fully interactive content. Among the most notable advantages are simplified text layout , including support for bidirectional languages or multiple lines via CSS, without complications.
Furthermore, the form controls work wonderfully and are much easier to customize. But the most powerful feature is that the content rendered on the canvas is exposed to the accessibility tree, allowing screen readers to interpret the interface . Even the browser's native search function (Ctrl+F) can locate and highlight text drawn within a WebGL texture—something that sounds like magic but is now a reality.
We also can't forget that web crawlers and AI agents can index content, and that browser extensions work natively. For example, if you have an extension that translates words, it will automatically update the text rendered in your 3D meshes. Even from Chrome's DevTools, we can inspect and change CSS styles in real time and see how they affect the 3D texture.
Use cases and real-life applications
This technology opens incredible doors. For very large canvas-based applications, it allows complex interface components to be rendered natively, reducing bundle size and improving accessibility. In the world of video games and WebXR, it's pure gold: you could create a 3D book whose pages are actual HTML or a command terminal within a game that allows native text copying and pasting.
Technical implementation: Step by step
Currently, the API is in an early stage (Chrome 148-150). To test it, you need to use Chrome Canary and enable the flag chrome://flags/#canvas-draw-elementThe usage process is divided into three main phases.
1. Canvas Setup
The first thing is to add the attribute layoutsubtree (o content="drawable" In more recent versions like Chrome 157+) to the canvas tag. This tells the browser that there are nested elements that need to be included in the layout. To prevent the content from appearing blurry, it is essential adjust the canvas grid to the device's scale factor using a ResizeObserver.
2. The rendering process
In a 2D context, we use the method drawElementImage within the event onpaintThis event fires whenever the element needs to be redrawn, for example, when the user highlights text. For WebGL, the equivalent function is texElementImage2D, and for WebGPU it is used copyElementImageToTextureIn all three cases, the objective is translate the DOM to a texture or graphic surface.
3. CSS Transformation Synchronization
This is where many fail. Once the element is rendered, you have to tell the browser where it physically is on the screen for clicks and hovers to work. In 2D, we apply the transformation returned by the drawing method to the property style.transform of the element. In 3D it is more complex, as it requires convert the WebGL MVP matrix to a DOM array, normalize the element and map it to the canvas viewport.
Library support and limitations
Fortunately, we don't have to do everything manually. Three.js has already implemented experimental support through THREE.HTMLTexturehandling the heavy synchronization, PlayCanvas also allows you to assign HTML fonts to your textures through its own API. However, it's important to note that, for security reasons, the API... It does not work with iframe content from other domains (cross-origin).
Another important limitation is that scrolling and animations within the canvas depend on JavaScript. This means they cannot be updated independently of the main thread, so performance must be monitored when adding scrollable content to a canvas.
Privacy & Security
The system is designed to avoid leaking sensitive information. The painting process excludes data from external domains, system colors, spell checkers, and information from visited links. Highlighting internal search results and the appearance of scrollbars are permitted, as these do not compromise user privacy .
This innovative architecture allows HTML content to be treated as a dynamic yet intelligent image. By integrating the browser's rendering flow with the power of the GPU, it solves accessibility problems in graphical environments and dramatically simplifies the creation of complex 3D interfaces, making the web more inclusive and visually impactful without sacrificing native functionality.