The WICG HTML-in-Canvas proposal enables rendering real HTML inside a <canvas> element while preserving DOM benefits like accessibility, CSS styling, and layout. The API introduces three primitives: a layoutsubtree attribute, a drawElementImage() method, and a paint event. The post explores four practical use cases: applying post-processing shader effects to HTML content, adding subtle UI interactions like vanish inputs, creating page transition effects like a curl/page-turn, and building 2D UIs embedded in 3D WebGL scenes. Three.js r184 already ships HTMLTexture and InteractionManager to leverage this proposal, enabling fully interactive HTML interfaces mapped onto 3D objects with native hit-testing. Current workarounds include html2canvas and SVG foreignObject, both with significant limitations compared to the native proposal.
Sort: