Google Introduces HTML-in-Canvas API: Accessible UI Meets WebGL / WebGPU
18 hours ago
- #Canvas API
- #Web Development
- #3D UI
- HTML-in-Canvas API allows rendering HTML elements directly into canvas, WebGL, and WebGPU contexts while maintaining accessibility and interactivity.
- Solves UI challenges in 3D web experiences by eliminating the need to overlay HTML or rebuild UI systems, preserving features like screen reader support and native browser interactions.
- Core API primitives include the 'layoutsubtree' attribute, 'drawElementImage()' method, and 'paint' event for efficient updates.
- WebGL and WebGPU equivalents like 'texElementImage2D()' and 'copyElementImageToTexture()' render HTML to textures while syncing with the DOM.
- Framework support is available with Three.js (via HTMLTexture class) and PlayCanvas integrations.
- Currently available behind a flag in Chrome Canary, with demos, an explainer, and resources like a Google I/O talk and official samples.