v148 · DOM-to-Canvas Bridge

DOM-to-Canvas Bridge

Mark an element with layoutsubtree and call ctx.drawElementImage(el) — CSS animations, custom properties, and live DOM content land on the canvas exactly as the browser paints them.

Origin Trial (Chrome 148–151). Enable chrome://flags/#canvas-draw-element to use the real API. The demo below detects support and falls back to a simulation if the API is unavailable.
Detecting HTML-in-canvas support…
DOM source element layoutsubtree ✓

Live DOM Card

This element has layoutsubtree set. It occupies space in the layout but is invisible in the normal paint tree — it only appears via drawElementImage() on the canvas.

CSS animations live DOM accessible
Canvas output 0 paints
Waiting for first draw call

API code

// Requires OT token or chrome://flags/#canvas-draw-element

// 1. Mark the element as a layoutsubtree
//    — invisible in page paint, still participates in layout
const sourceEl = document.getElementById('card');
sourceEl.setAttribute('layoutsubtree', '');

// 2. Listen for paint invalidations (CSS changes, animations, etc.)
sourceEl.addEventListener('paint', () => {
  // The element's visual state changed — redraw it to the canvas
  drawFrame();
});

// 3. Draw to a 2D canvas
const canvas = document.getElementById('output');
const ctx = canvas.getContext('2d');

function drawFrame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // ctx.drawElementImage(element, [dx, dy, dw, dh])
  // Draws the element exactly as the browser renders it
  ctx.drawElementImage(sourceEl);

  // Or with positioning and scaling:
  // ctx.drawElementImage(sourceEl, 0, 0, canvas.width, canvas.height);
}

// 4. Force an initial paint
drawFrame();

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗