The HTML-in-Canvas API origin trial

The HTML-in-Canvas API is an experimental Chrome feature, available in an origin trial (Chrome 148-150) that lets developers render real DOM content into 2D canvas or WebGL/WebGPU textures while preserving interactivity, accessibility, and browser integrations. It removes the traditional tradeoff between DOM semantics (rich text layout, form controls, selection, find-in-page, accessibility tree, extensions, DevTools inspection, indexing) and canvas performance (pixel-level 2D/3D rendering used by games, WebXR, and complex apps). By drawing HTML into canvas-backed textures, applications can keep native text layout and browser features, shrink custom UI code and bundle size, and embed functional web UI inside 3D scenes or heavyweight canvas apps.

Using the API follows three phases: enable the origin trial (test on Chrome Canary 149+ with chrome://flags/#canvas-draw-element), prepare the canvas (add layoutsubtree to expose nested content and size the canvas to device pixel ratio), then render and sync transforms. For 2D use ctx.drawElementImage and apply the returned transform to element.style.transform. For WebGL use gl.texElementImage2D; for WebGPU use device.queue.copyElementImageToTexture. When shaders alter positioning, compute a DOM transform from the WebGL MVP via element.getElementTransform (normalize element size, map to viewport, flip Y, and combine matrices) so pointer events and selection align with rendered pixels.