Chrome's HTML-in-Canvas origin trial renders live DOM content into 2D and WebGL canvases

Chrome opens an origin trial for DOM content inside canvas

Google has started an origin trial of an experimental HTML-in-Canvas API in Chrome that lets developers draw real DOM elements directly into a 2D canvas or a WebGL/WebGPU texture while the content stays interactive and keeps its normal browser behaviour. According to the Chrome for Developers blog post announcing the trial, it covers Chrome 148 through 150.

The trade-off it targets

The post frames the API as a way out of a decision that has shaped web architecture for years. The DOM provides text layout out of the box, semantic structure, and deep integration with browser features such as accessibility tools, find-in-page, translate, reader mode, extensions, dark mode, zoom, and autofill. Canvas, WebGL, and WebGPU offer the low-level pixel control that graphics-heavy applications — the post names Google Docs and Figma — need for performance. The cost of that control is that everything drawn into a canvas becomes opaque pixels: basic behaviours like text selection or responsive text layout have to be rebuilt by hand, which the post notes can drastically increase bundle size, and browser integrations stop working altogether.

What the API preserves

With HTML-in-Canvas, developers nest markup inside the canvas element and keep its transform synchronised, so the rendered UI behaves like ordinary DOM. The blog lists the capabilities that carry over:

• Text layout and formatting, including multiline and bidirectional text with CSS styles applied
• Native, customisable form controls
• Text selection, copy/paste, and right-click context menus
• Exposure to the accessibility tree, so assistive technology can parse the UI as normal HTML
• Find-in-page, with the browser highlighting matches inside WebGL textures
• Indexability by web crawlers and readability by AI agents
• Native integration with browser extensions
• DevTools inspection, so tweaking a CSS style in the inspector updates the 3D texture immediately

Suggested use cases include heavyweight canvas-driven applications rendering complex UI components into their workspace, improving accessibility while cutting bundle weight, and 3D scenes: marketing sites, WebXR experiences, and games embedding genuinely interactive DOM UI, such as an in-game terminal that supports copy and paste or a 3D book built from real text.

How it works

The blog describes three phases. First, setup: add a layoutsubtree attribute to the canvas tag so the browser knows about the nested content and can expose it to accessibility trees, and size the canvas grid to match the device pixel ratio, using ResizeObserver and devicePixelContentBoxSize, to avoid blurry output.

Second, rendering. A 2D context exposes a drawElementImage method, called inside the canvas paint event, which fires whenever the element redraws — for example during text highlighting or user input. WebGL gets texElementImage2D, which mirrors texImage2D but accepts a DOM element as its source, and WebGPU gets copyElementImageToTexture on the device queue, analogous to copyExternalImageToTexture.

Third, synchronisation: the rendering call returns a transform that must be applied to the element's CSS transform property. This tells the browser exactly where the element physically sits on screen so events such as clicks and hovers map to the correct position within the rendered output.

Trying it out

The trial runs in Chrome 148 through 150. Developers can experiment locally with Chrome Canary 149 or later by enabling the chrome://flags/#canvas-draw-element flag, or register for the origin trial to enable the API for other users on their site.

Why it matters

Canvas-heavy applications are effectively invisible to much of the web platform today: screen readers, search crawlers, extensions, and find-in-page all fail once UI is flattened into pixels, and apps like editors and design tools spend significant engineering effort rebuilding text handling inside canvas. If HTML-in-Canvas ships, it could eliminate that entire category of reimplementation and make high-performance graphics applications accessible by default. The blog's explicit pitch that AI agents can read text rendered into 2D and 3D scenes is also a sign of the times — as agent traffic grows, pixel-only UI becomes a growing liability. For now, this is an experimental origin trial, so developers should expect the API surface to change before any stable release.