For years, web developers have faced a difficult choice when building highly interactive visual applications: rely on the DOM for its rich semantic features, or render to the <canvas> element for low-level graphics performance. The new experimental HTML-in-Canvas API, now available in origin trial, removes that trade-off. It lets developers draw DOM content directly into a 2D canvas or a WebGL/WebGPU texture while keeping the UI interactive, accessible, and connected to browser features.
The DOM is the foundation of web UI. It provides built-in text layout and semantically understood content, and it supports everyday operations such as highlighting text to copy or right-clicking an image to save it. It also integrates with accessibility tools, translate, find-in-page, reader mode, extensions, dark mode, browser zoom, and autofill. Canvas, including WebGL and WebGPU, offers low-level pixel access for advanced 2D and 3D graphics, which games and complex apps such as Google Docs and Figma depend on. However, because canvas is a grid of pixels, UI inside it loses these browser integrations and often requires heavy custom logic.
The HTML-in-Canvas API bridges this gap. By placing HTML inside the <canvas> element and synchronizing its transform, developers get simplified text layout, expressive form controls, native text selection and context menus, accessibility tree exposure, find-in-page support, indexability for crawlers and AI agents, extension compatibility, and Chrome DevTools inspection. Use cases include large canvas-based applications, 3D scenes and web games, and immersive WebXR experiences that need real, interactive DOM UI.
Source: Hacker News · Summarized by HeadlinesBriefing