v148 · Web APIs · Canvas
Social Card Generator
Chrome 148's HTML-in-canvas trial lets a 2D canvas context paint an opted-in DOM subtree with ctx.drawElementImage(). Build a social card as live HTML, probe the native method, then compare it with the explicit fallback renderer before downloading the PNG.
Card content
Title
Tagline
Site URL
Author
Theme
HTML source → canvas output
Build the card then click "Render to canvas"
HTML element (source)
canvas output
// Chrome 148: draw an HTML element image to canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const el = document.querySelector('#card');
// drawElementImage resolves after painting the live DOM subtree
await ctx.drawElementImage(el, 0, 0, canvas.width, canvas.height);
// Then export as PNG
const url = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = url;
a.download = 'social-card.png';
a.click();
references
see also
- DOM to Canvas Bridge — general DOM rendering
- Canvas Renderer — rendering pipeline details
- Thumbnail Generator — page thumbnails
- Layout Subtree Explorer — layout capture
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗