Google Introduces HTML-in-Canvas API: Accessible UI Meets WebGL / WebGPU | WebGL / WebGPU Community — Showcase, Tutorials, Examples & More

Skip to content

Submit Content

Login/Register

At Google I/O 2026, Chrome engineer Thomas Nattestad unveiled the HTML-in-Canvas API, which is a new web platform feature that lets developers render HTML elements directly into canvas, WebGL, and WebGPU contexts while preserving accessibility and interactivity.<br>The Problem It Solves<br>Building UI for 3D web experiences has long forced developers into an uncomfortable choice: overlay HTML elements on top of canvas (breaking immersion and causing z-order headaches), or rebuild UI systems from scratch inside the canvas (losing accessibility, internationalization, and native browser features like text selection and form inputs).<br>HTML-in-Canvas eliminates this trade-off. A form rendered as a texture on a 3D surface still works with screen readers. Buttons on a spinning cube still respond to clicks. Text inputs on a curved menu still show blinking cursors.<br>How It Works<br>The API introduces three core primitives:<br>layoutsubtree attribute — Opt-in for canvas children to participate in layout and hit testing<br>drawElementImage() — Draw a child element into the canvas (with WebGL and WebGPU equivalents)<br>paint event — Fires when canvas children change, enabling efficient updates<br>For WebGL, there's texElementImage2D(). For WebGPU, there's copyElementImageToTexture(). Both render HTML to textures while keeping the DOM synchronized for accessibility.

const ctx = canvas.getContext('2d');<br>canvas.onpaint = () => {<br>ctx.reset();<br>const transform = ctx.drawElementImage(myForm, 100, 50);<br>myForm.style.transform = transform.toString();<br>};<br>Framework Support<br>Three.js and PlayCanvas integrations are already available. The Three.js implementation (PR #31233 by mrdoob) adds an HTMLTexture class that handles the synchronization automatically.<br>Try It Now<br>The API is available behind a flag in Chrome Canary:<br>Enable chrome://flags/#canvas-draw-element<br>Check out the live demos<br>Read the full explainer<br>Resources<br>Video : Google I/O 2026 Talk<br>Spec : WICG/html-in-canvas<br>Three.js Integration : PR #31233<br>Samples : Official Examples

Share with friends

Link copied

NewsGoogleWebGLWebGPUHTML-in-Canvas

Stay in the loop

Join the community hub of WebGL and WebGPU. Discover projects, tutorials, tools, and a thriving community building the next generation of web graphics and computation.

Enter your email

Subscribe

Processing your application...

Success! Please check your inbox and click the link to confirm your subscription.

Sorry, something went wrong. Please try again.

© 2026 WebGL / WebGPU Community — Showcase, Tutorials, Examples & More

WebGL® is a trademark of the Khronos Group Inc. WebGPU developed by W3C. This is an independent community site not affiliated with Khronos or W3C.