Google I/O just dropped an absolute bomb of an API for frontend developers: HTML-in-Canvas.
If you’ve ever built immersive 3D web experiences, map tools, or heavy data dashboards using WebGL or WebGPU, you know the absolute nightmare of rendering UI text or buttons on top of a canvas. You either had to sync floating, absolute-positioned HTML elements on top of the canvas (which lagged during fast scrolls), or draw text manually using WebGL textures (which killed SEO and accessibility).
The new HTML-in-Canvas API fixes this by introducing three new primitives—like the layoutsubtree attribute and textElementImage2D()—allowing you to put real, styleable HTML elements directly inside a canvas. The browser feeds it straight into the GPU as a texture, but keeps it part of the normal DOM layout and accessibility tree.
Because it’s an active origin trial, the wild west rules apply. Here are the practical Do's and Don'ts for this new playground.
👑 The DO's
DO use it for complex data visualizations and 3D UI: This is the ultimate sweet spot. If you are building high-frequency data dashboards or immersive spatial sites, you can now build your menus, form controls, and text overlays in standard HTML/CSS and let the GPU layer them directly over your canvas without a hint of frame lag.
DO keep accessibility in mind: Because the elements inside the canvas are real DOM nodes, screen readers can finally read your canvas text, and browser translate features actually work on it natively. Make sure you use semantic HTML (
<button>,<input>, etc.) inside your canvas subtree so the accessibility tree populates correctly.DO use CSS for layout: You don't have to write custom JavaScript positioning math anymore. You can apply standard CSS styling to children within the
layoutsubtree. Let the browser engine calculate the bounds, then use theonpainthook to upload the fresh layout changes to your WebGL/WebGPU shaders.
🚫 The DON'Ts
DON'T dump your whole app into a canvas: Just because you can render HTML in a canvas doesn’t mean your entire landing page belongs in one. Canvas-heavy rendering consumes significantly more battery and GPU resources. Use it strictly for high-fidelity interactive sections, not standard text articles.
DON'T update the inner HTML 60 times a second: The API relies on a
.onpaintevent to upload changes as a GPU texture. If you are blasting text modifications or CSS transitions inside the canvas subtree on every single frame, you will bottleneck the main thread with heavy texture re-uploads. Keep the static UI inside the canvas, and use WebGL shaders for the crazy animations.DON'T ship this to production blindly yet: It’s an origin trial. It currently requires a flag in Chrome Canary and isn't a baseline standard across Safari or Firefox yet. Use this phase to build prototypes, learn the architecture, and write feedback for the WICG proposal while the API matures.
The Verdict
The web is getting fun again. HTML-in-Canvas breaks down the wall between traditional document layouts and hardware-accelerated creative engineering. It’s going to completely change how we build tools, dashboards, and spatial interfaces over the next few years.
Are you planning to test out the origin trial? What wild UI ideas are you thinking of throwing into a shader? Let’s chat shop in the comments.
