HTML‑in‑Canvas: Boosting Front‑End Interactivity

What is HTML‑in‑Canvas?

HTML‑in‑Canvas is a new WICG proposal whose core goal is to have the browser draw the actual DOM rendering result onto a <canvas>. Developers still write familiar HTML + CSS, but the Canvas element performs the final painting.

Why was it created?

The proposal addresses several long‑standing Canvas limitations:

Lack of high‑quality text layout and typography.

High UI construction cost when drawing pixel‑by‑pixel.

Missing accessibility (a11y) support.

Poor integration with modern GPU rendering pipelines.

Benefits

By reusing the browser’s native layout engine, HTML‑in‑Canvas eliminates the need to manually compute coordinates, maintain animation state, or write a custom rendering engine. Text, line‑breaks, multilingual content and CSS styling are handled automatically.

Accessibility improves because the DOM subtree remains present for screen readers and semantic interaction.

HTML content can be used as a texture, allowing seamless blending of UI and 3D graphics in WebGL, WebGPU or XR scenes.

Rendering control

The Canvas subtree participates in layout but is not directly visible; developers decide when to repaint, animate, or manipulate pixels.

How to use it?

It is currently an experimental feature available in Chromium. Enable it via the flag: chrome://flags/#canvas-draw-element The core API consists of two parts:

layoutsubtree

Wrap a DOM subtree inside a special <canvas layoutsubtree> element. The subtree is laid out by the browser but remains invisible until explicitly drawn.

drawElementImage

ctx.drawElementImage(element, x, y);

This call copies the rendered result of element onto the canvas at the specified coordinates. It is the primary API of the proposal.

Paint mechanism

canvas.onpaint = () => {};
canvas.requestPaint();

When the DOM content changes, the onpaint callback is invoked, providing a more declarative update model compared to manual canvas refreshes.

Integration with GPU pipelines

WebGL: texElementImage2D WebGPU: copyElementImageToTexture These APIs allow the rendered HTML to be used directly as a texture, blurring the line between UI and 3D rendering.

Existing use cases

Game UI – HTML defines the interface, Canvas drives rendering.

Data visualization – charts combined with HTML labels.

Poster generation – direct export of HTML‑styled graphics.

WebGL/3D UI – HTML used as texture.

Design tools – rich‑text editing with real‑time canvas output.

Official example source code is available at https://github.com/WICG/html-in-canvas/tree/main/Examples.

Conclusion

HTML‑in‑Canvas does not immediately replace existing workflows, but it introduces a new way to write UI with HTML while leveraging Canvas for rendering. Developers working on visualizations, games, or WebGL‑based interfaces should keep an eye on this experimental feature.