HTML-in-Canvas API:
Complete Guide to Drawing DOM in Canvas

Introduction

For over a decade, web developers have faced an uncomfortable tradeoff: build in the DOM (rich interactivity, accessibility, styling) or build on Canvas (raw pixel control, high performance, 3D graphics). You couldn't have both — at least not elegantly. Solutions like html2canvas and rasterizeHTML approximated screenshots server-side or in the browser, but they were slow, inaccurate, and couldn't handle dynamic content.

At Google I/O 2026 (May 19), Google announced HTML-in-Canvas — a new web platform API that finally bridges this gap. It lets you render real, live DOM elements directly onto an HTML Canvas context, supporting 2D, WebGL, and WebGPU rendering pipelines. Combined with the other 15 Chrome updates announced at I/O, this is one of the most significant additions to the web graphics stack in years. For a full summary of all Chrome announcements, see our Google I/O 2026 Day 2 Recap: Chrome Updates guide.

The API is currently available as an Origin Trial in Chrome 148-150 (stable channel, May 2026). Developers can opt in via the origin trial token or enable chrome://flags/#canvas-draw-element. This guide covers every API primitive with working code examples, browser support timelines, performance strategies, and real-world use cases.

The Problem It Solves

Before HTML-in-Canvas, if you wanted rich interactive HTML — styled forms, complex layouts, live data visualizations — inside a Canvas-based application (game, design tool, video editor), you had three bad options:

• Overlay DOM on top of Canvas — positioning HTML elements over the Canvas at absolute coordinates. This breaks when the Canvas scrolls, scales, or transforms in 3D.
• Screenshot the DOM — using html2canvas or SVG foreignObject. Slow, produces static images, doesn't update when the DOM changes without re-rendering entirely.
• Reimplement everything in Canvas — manually drawing text, buttons, inputs, and layouts with Canvas 2D drawing commands. This is what game engines and creative tools have been doing, and it's an enormous engineering effort to match browser-native rendering fidelity.

The HTML-in-Canvas API solves all of this by giving you a direct pipe from the DOM renderer into your canvas context. It's not a screenshot — it's the actual browser rendering engine painting into your canvas at the pixel level.

Core API Concepts

The API consists of several primitives that work together. All methods live on the HTMLCanvasElement and CanvasRenderingContext2D / WebGLRenderingContext / GPUCanvasContext interfaces.

layoutSubtree(element)

Before you can render a DOM element onto a canvas, the browser needs to compute its layout. layoutSubtree() performs a synchronous layout of the element's subtree, ensuring all dimensions, positions, and computed styles are ready. This is a mandatory first step — calling drawElementImage() or texElementImage2D() without first calling layoutSubtree() produces an empty result.

drawElementImage(element, dx, dy)

Paint a DOM element onto a 2D canvas context. The signature mirrors drawImage() — you can specify destination coordinates and optionally source cropping. The element is rendered at its natural DOM size and painted onto the canvas at the specified coordinates.

texElementImage2D(element, textureUnit)

Upload a DOM element directly as a WebGL or WebGPU texture. This is the most efficient path for 3D rendering — it avoids a CPU round-trip by going directly from the browser compositor to the GPU texture memory.

copyElementImageToTexture(element, texture)

Copy a rendered DOM element into an existing WebGL texture object. Useful for frameworks like Three.js where you manage texture objects directly.

captureElementImage(element)

Return a static ImageBitmap or HTMLImageElement of the rendered element. This is useful for one-time captures where you don't need live updates.

getElementTransform(element)

Returns a DOMMatrix representing the element's current computed transform relative to the canvas coordinate system. Essential for mapping between Canvas coordinates and DOM coordinates, and for applying transforms in 3D scenes.

Paint Event

The paint event fires on the canvas when the HTML-in-Canvas render completes. Listen for it to know when your element has been painted and is ready to use:

canvas.addEventListener('paint', () => {
  // Element has been painted — safe to read back, composite, etc.
});

ElementImage

An ElementImage object represents a cached, renderable snapshot of a DOM element. Create one with canvas.createElementImage(element) for efficient re-rendering without re-laying out the DOM on every frame.

Code Examples

1. 2D Canvas — Render a Styled HTML Form

The simplest case: take a styled HTML form element and paint it onto a 2D canvas. This is useful for game UIs, interactive kiosks, and creative tools:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const form = document.getElementById('loginForm');

// Step 1: Ensure layout is computed
canvas.layoutSubtree(form);

// Step 2: Draw the element onto the canvas
drawElementImage(form, 50, 50);

// Listen for paint completion
canvas.addEventListener('paint', () => {
  console.log('Form rendered on canvas!');
}, { once: true });

2. WebGL — Element as Shader Texture

For real-time graphics applications, use texElementImage2D() to bind a DOM element directly as a WebGL texture:

const gl = canvas.getContext('webgl');
const uiElement = document.getElementById('hud-panel');

// Lay out the element
canvas.layoutSubtree(uiElement);

// Upload directly as texture unit 0
texElementImage2D(uiElement, 0);

// Now available as TEXTURE0 in your shader
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, myTexture);

// The HUD element is now a texture your shader can sample

3. Three.js Integration — THREE.HTMLTexture

For Three.js developers, the API integrates naturally. Create an offscreen element, lay it out, and use it as a material map:

import * as THREE from 'three';

// Create offscreen HTML content
const div = document.createElement('div');
div.innerHTML = '<h2>Hello, 3D!</h2><p>Rendered via HTML-in-Canvas</p>';
div.style.cssText = 'width:300px;height:200px;background:#1a1a2e;color:white;padding:20px;';
document.body.appendChild(div);

// Lay out and capture
canvas.layoutSubtree(div);
const imageBitmap = captureElementImage(div);

// Create Three.js texture
const texture = new THREE.CanvasTexture(imageBitmap);

// Apply to a material
const material = new THREE.MeshStandardMaterial({ map: texture });
const mesh = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), material);
scene.add(mesh);

4. Matrix Math — getElementTransform in Practice

When rendering DOM elements in a 3D scene or transformed canvas context, you need to map coordinates precisely. getElementTransform() returns the full transform matrix:

const transform = canvas.getElementTransform(myElement);
// Returns a DOMMatrix

// Apply transform to a Three.js object
const matrix = new THREE.Matrix4();
matrix.fromArray(transform.toFloat64Array());
threeObject.applyMatrix4(matrix);

// Or use it for hit-testing canvas coordinates back to DOM:
canvas.addEventListener('click', (e) => {
  const inverse = transform.inverse();
  const domPoint = inverse.transformPoint(
    new DOMPoint(e.offsetX, e.offsetY)
  );
  // Check if domPoint.x / domPoint.y falls within the element bounds
});

Element-Scoped View Transitions

Announced alongside HTML-in-Canvas at Google I/O 2026, element-scoped view transitions enable smooth animated transitions between DOM states when those elements are rendered onto a Canvas. This is a critical addition — without it, changing a DOM element's content would cause a jarring visual cut on the Canvas render.

The API works by capturing the previous and next paint states of an element and interpolating between them:

// Start a view transition scoped to the element
const transition = document.startViewTransition({
  update: () => {
    // Change the DOM content
    updateElementContent();
    // Re-layout and re-paint for the canvas
    canvas.layoutSubtree(myElement);
    drawElementImage(myElement, 0, 0);
  }
});

await transition.finished;
console.log('Smooth Canvas transition complete!');

Browser Support Timeline

The HTML-in-Canvas API has been in development for over a year. Here's the current status:

• Chrome 138 (Dec 2025): Developer Trial begins behind flag chrome://flags/#canvas-draw-element. WICG proposal reaches 3.3k+ stars.
• Chrome 148 (May 2026): Origin Trial begins. API stabilizes with layoutSubtree, drawElementImage, texElementImage2D, captureElementImage, getElementTransform. Works on Desktop Chrome.
• Chrome 149-150 (June-July 2026): Origin Trial continues. Expected API refinements and performance improvements based on developer feedback.
• Late 2026 (estimated): Stable ship if Origin Trial metrics are positive.

Important: No other browser engine (Firefox, Safari) has committed to implementing HTML-in-Canvas. This is a Chrome-exclusive API for the foreseeable future. Other WebGPU and WebGL innovations continue to be cross-browser — for a broader look at the web AI landscape, see my Chrome Prompt API Guide.

Performance & Best Practices

Getting good performance with HTML-in-Canvas requires understanding where the bottlenecks are:

1. Minimize layoutSubtree() Calls

layoutSubtree() is the most expensive operation — it triggers a full browser layout pass on the element subtree. Call it only when the source DOM actually changes. For animations at 60fps where the DOM stays the same, call it once and use the cached ElementImage for subsequent frames.

2. Listen to the Paint Event

Don't read back canvas pixels or composite immediately after calling drawElementImage(). Wait for the paint event to fire, which signals that the rendering pipeline has completed compositing the element onto the canvas.

3. Always Handle DPR Correctly

The HTML-in-Canvas API renders at the canvas's current pixel dimensions, not CSS dimensions. On high-DPI displays (Retina), you must scale your canvas backing store:

const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);

// Now drawElementImage() renders at native resolution

4. Feature Detection

Always check for API support before using it:

const supportsHtmlInCanvas =
  'layoutSubtree' in HTMLCanvasElement.prototype &&
  'drawElementImage' in CanvasRenderingContext2D.prototype;

if (supportsHtmlInCanvas) {
  // Use the API
} else {
  // Fall back to traditional Canvas rendering or overlaid DOM
}

5. Use ElementImage for Repeated Renders

If you're rendering the same element every frame (e.g., a HUD overlay in a game), create an ElementImage once and reuse it. This avoids re-laying-out the DOM every frame:

const elementImage = canvas.createElementImage(hudElement);
canvas.layoutSubtree(hudElement);

function renderFrame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  elementImage.draw(ctx, 10, 10);  // Fast path — no DOM layout
  requestAnimationFrame(renderFrame);
}

Real-World Use Cases

The HTML-in-Canvas API opens up several categories of applications that were previously impractical:

Gaming UIs

Game engines embedded in the browser (PlayCanvas, Unity WebGL, custom engines) need rich menus, inventory screens, chat panels, and HUD overlays. Instead of reimplementing every UI widget on Canvas, developers can now build UIs in standard HTML/CSS and render them into the game world. The Three.js integration path makes this especially seamless for WebGL-based game engines.

Interactive Data Visualization

Data viz tools often mix Canvas-rendered charts and graphs with DOM-based tooltips, legends, and controls. With HTML-in-Canvas, tooltips and annotation labels can be true HTML elements rendered directly on the Canvas, preserving their styling and layout while being part of the graphic.

Design Tools

Applications like Figma, Photopea, and Excalidraw render everything on Canvas for performance but need rich text editing, styled inputs, and complex form controls. HTML-in-Canvas allows these tools to embed real DOM elements (text editors, color pickers, dropdowns) at specified Canvas coordinates without the overlay-style positioning hacks.

Video Editing & Motion Graphics

Canvas-based video editors can composite DOM elements (titling cards, lower thirds, credits rolls) directly into their rendering pipeline, using WebGL textures for GPU-accelerated compositing. The element-scoped view transitions enable professional-grade keyframe animations on DOM-based overlay elements.

Interactive Presentations

Presentation frameworks (like Reveal.js alternatives on Canvas) can embed real HTML content — code blocks with syntax highlighting, iframes, complex tables — directly into Canvas-based slides without the "jumpy overlay" feel.

Creative Coding & Generative Art

Artists using Canvas for generative work can now mix DOM-rendered typography, SVG-based elements, and styled HTML widgets into their real-time graphics pipeline, combining the expressive power of Canvas with the layout capabilities of HTML/CSS.

WebGL vs WebGPU Rendering

Both texElementImage2D() and future WebGPU equivalents take different paths:

• WebGL path: Use texElementImage2D() to upload directly as a WebGL texture. Works on all WebGL-capable browsers (Chrome, Firefox, Safari). The API is synchronous — the texture is ready immediately after the call.
• WebGPU path: Planned for future Chrome releases. Will use copyElementImageToTexture() with a GPUTexture target. Benefits from WebGPU's lower driver overhead and explicit resource management.

For most applications in 2026, the WebGL path via texElementImage2D() is the practical choice. WebGPU support is expected to follow in later origin trial iterations.

Migration Strategy

If you have an existing Canvas-based application and want to adopt HTML-in-Canvas, here's a practical migration plan:

1. Audit your current Canvas rendering. Identify all elements currently drawn with Canvas 2D commands that could be replaced by DOM elements (text labels, buttons, forms).
2. Build DOM equivalents. Create HTML/CSS versions of those elements in a hidden offscreen container (position:absolute;left:-9999px or a detached div).
3. Replace Canvas draw calls. Instead of ctx.fillText() or custom button drawing, use layoutSubtree() + drawElementImage().
4. Add paint event listeners. Ensure your render loop waits for the paint event when compositing frames that depend on HTML-in-Canvas output.
5. Implement coordinate mapping. Use getElementTransform() to handle Canvas ↔ DOM coordinate translation for interactive elements.
6. Optimize with ElementImage. For UI elements that don't change every frame, create persistent ElementImage objects and reuse them in the render loop.
7. Add feature detection and fallback. Keep your old Canvas draw-based rendering as a fallback for browsers without HTML-in-Canvas support.

Limitations & Known Issues

As with any origin-trial API, there are important limitations to be aware of before building production applications:

• DPR scaling complexity: Rendering looks blurry or misaligned if the canvas backing store resolution doesn't match the device pixel ratio. You must manually scale.
• Paint timing is asynchronous: The API returns immediately from drawElementImage() but the actual painting happens asynchronously. The paint event is your only reliable synchronization signal.
• No pointer events on Canvas pixels: The rasterized output on the Canvas does not receive input events. You must forward mouse/touch coordinates back to the source DOM element using coordinate mapping.
• Memory overhead: Each layoutSubtree() call creates internal render surfaces. Call it judiciously and destroy ElementImage objects when they're no longer needed.
• Cross-origin restrictions: Elements containing cross-origin content (iframes, images) may be blocked by CORS policies, resulting in blank renders.
• Chrome-only: The API is unavailable in Firefox, Safari, and other Chromium forks that don't ship the flag. Always provide a fallback.

FAQ

Should You Adopt HTML-in-Canvas Now?

If you're building a Canvas-based application and need rich HTML UIs inside it, yes, but with caveats. The Origin Trial gives you the opportunity to experiment and provide feedback, and the API is stable enough for prototyping and non-critical UIs. For production applications targeting a broad audience, wait for stable release and verify browser support metrics. Always implement graceful degradation — your Canvas app should still work without HTML-in-Canvas, just with less polished UI.

The combination of HTML-in-Canvas, element-scoped view transitions, and the broader Chrome web platform updates (see our WebMCP guide for the AI-agent side of the platform) makes this an exciting time for web graphics. The gap between "what you can build with the DOM" and "what you can build on Canvas" is finally closing.