Chrome's HTML-in-Canvas API lets DOM content render inside 3D scenes
The HTML-in-Canvas API origin trial
Chrome has launched an origin trial for the HTML-in-Canvas API, which draws DOM content directly into a 2D canvas or WebGL/WebGPU texture while keeping it interactive and accessible. Developers no longer have to choose between the DOM's rich semantics and canvas performance. Text selection, find-in-page, screen readers, extensions, and DevTools all keep working inside 3D scenes. Three.js and PlayCanvas already offer experimental support.
For years, web developers have had to make a tough architectural choice when building complex, highly-interactive visual applications on the web: Should you lean on the DOM for its rich semantic features or render directly to the canvas element for low-level graphics performance?
- pmkary
This is the best news ever! I can't believe it was implemented in just one year after that blogpost... Boy I'm going to be spending good portions of my life making with this API...
- andsoitis
Discussion a year ago about html-in-canvas: https://news.ycombinator.com/item?id=44772177
(116 comments)
- artpar
I wanted to implement a whole canvas native workspace, I started with a html only implementation and "fake canvas" approach but even for moderate number of panels (~50) the responsiveness dropped quite a lot. So I went with a new implementation with "real canvas" and worked out the panels/interaction.
In terms of performance this approach worked out much better (able to easily handle 1000+ panels/nested panels at 60+ fps) but the complexity goes very high in the implementation of each panel. As in I cant just use for eg a markdown rendering js library or any third party ui component. And frequently make a change would result in massive performance degradation.
Currently I have text/markdown/image/audio/video and pdf panel (you can drag and drop files)
I wonder if i should take another go at it and implement using html-in-canvas api. Afraid of the api being not maintained if they dont see benefit or usage?
- mrec
Hmm, not immediately clear how this avoids potential privacy leaks, such as drawing DOM hyperlinks to the canvas and then scraping their visited-status colour from the pixel data.
Or maybe I'm behind the times; I've not done serious webdev for a long time.
- hollowturtle
Gosh how much I'd love to have a separate accessibility and text layout api like skia has and ditch the dom completely