v148 · Canvas · DOM
Canvas Renderer
Render live DOM content — including CSS variables, dark mode, and custom styling — directly into a 2D canvas using Chrome 148's HTML-in-Canvas API. The DOM card on the left is the live source; clicking "Render" captures its pixels onto the canvas on the right.
Checking HTML-in-Canvas API support…
Live DOM source
Web Platform Weekly
Chrome 148 ships a rich set of new APIs including HTML-in-Canvas, allowing any DOM subtree to be rendered directly as canvas pixels with full CSS support.
Chrome 148
Canvas
DOM
148
Version
23
APIs
100%
Interop
Canvas output
Click "Render to Canvas" to capture the DOM card.
API shape
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
// Chrome 148: render a DOM subtree into the canvas context
// layoutsubtree() returns a Promise once the layout is complete
const source = document.getElementById('dom-source');
await ctx.drawElement(source, 0, 0, canvas.width, canvas.height);
// The DOM stays live — CSS variables, dark mode, and
// custom properties are all baked into the canvas pixelsreferences
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗