v148 · Canvas · DOM · origin trial · demo

Thumbnail Generator

Select a content card and click Render — the browser attempts the HTML-in-canvas ctx.drawElementImage() path to rasterise the live DOM element, then falls back to an explicit canvas simulation when the origin trial API is unavailable.

Origin Trial — Chrome 148+ — layoutsubtree plus CanvasRenderingContext2D.drawElementImage(). The controls below show the detected method and make the unsupported-browser fallback visible instead of pretending the native API ran.

Pick a card, set the output size and scale, then render or force the fallback path.

Platform · v150
CSS fit-width text
Scale text to exactly fill its container — no JavaScript, no vw hacks.
CSS
Platform · v149
CSS Gap Decorations
Draw lines inside grid and flexbox gaps — no border hacks, no extra markup.
CSS
Platform · v148
HTML in Canvas
Render live DOM elements directly into a 2D canvas context.
CanvasOrigin Trial
Canvas thumbnail
Select a card above
// HTML in Canvas — Chrome 148 origin trial
// No SVG serialisation. No html2canvas. Full CSS support.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const card = document.querySelector('.card');

// drawElementImage renders the live DOM element into the canvas.
// Older prototypes used drawHTMLElement() or drawElement().
await ctx.drawElementImage(card, 0, 0, 300, 200);

// The element stays in the DOM, fully functional.
// Its CSS (variables, custom fonts, transitions) all render correctly.
// Result is a raster snapshot — export as PNG, WebP, etc.
const png = canvas.toDataURL('image/png');

// To make the original invisible without removing it from layout:
// add the 'layoutsubtree' attribute — it hides but preserves layout.
card.setAttribute('layoutsubtree', '');

references

see also

implementation reference

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