Google Launches HTML-in-Canvas API to Bridge 3D Graphics and Web UI Accessibility
Key Takeaways
- ▸HTML-in-Canvas API enables rendering interactive HTML UI directly in 3D contexts (canvas, WebGL, WebGPU) while maintaining full accessibility and browser feature support
- ▸Eliminates the false choice between immersive 3D experiences and accessible, feature-rich web UI with native form controls
- ▸Three.js and PlayCanvas frameworks already offer integrations with automated synchronization
Summary
At Google I/O 2026, Chrome engineer Thomas Nattestad unveiled the HTML-in-Canvas API, a new web platform feature that allows developers to render HTML elements directly within canvas, WebGL, and WebGPU contexts while preserving full accessibility and interactivity. The API solves a longstanding developer dilemma: previously, building user interfaces for 3D web experiences required either overlaying HTML on top of graphics (creating z-order conflicts and immersion problems) or rebuilding UI systems from scratch in canvas (losing accessibility, text selection, form inputs, and internationalization support).
The solution introduces three core primitives—a layoutsubtree attribute for opt-in layout participation, drawElementImage() to render child elements into the canvas, and a paint event to handle efficient updates. WebGL developers get texElementImage2D() while WebGPU developers get copyElementImageToTexture(). The DOM remains synchronized throughout, ensuring that form inputs on 3D surfaces still work with screen readers, buttons on spinning cubes respond to clicks, and text fields show blinking cursors.
Three.js and PlayCanvas already support the new API; the Three.js implementation (PR #31233) adds an HTMLTexture class that handles synchronization automatically. The feature is currently available in Chrome Canary behind a developer flag (chrome://flags/#canvas-draw-element) and is progressing through the WICG standardization process.
- Feature is in Chrome Canary and progressing toward standardization via WICG
Editorial Opinion
This API represents a pragmatic solution to real developer friction in the 3D web space. By preserving DOM accessibility and browser features while enabling immersive graphics, Google has created a path toward inclusive 3D interfaces that don't require choosing between cutting-edge visuals and assistive technology. For developers building data visualization, gaming, and AR/VR experiences on the web, this is a meaningful step forward.
