v148 · Origin Trial · Canvas · WebGL

HTML-in-canvas

Draw live DOM elements directly into 2D canvas or WebGL/WebGPU textures — with accessibility, find-in-page, dark mode, and browser extensions intact. The DOM stays the DOM; the canvas gets the pixels.

Origin Trial (Chrome 148–151). HTML-in-canvas requires an origin trial token or the chrome://flags/#canvas-draw-element flag. These demos run with a graceful fallback — enable the flag to see the real API in action.

concepts

  1. DOM-to-Canvas Bridge

    Use layoutsubtree to make an HTML element invisible to the page, then call ctx.drawElementImage(el) to composite it into a 2D canvas — CSS animations, custom fonts, and all. Edit the live source element and watch the canvas update.

  2. layoutsubtree Explorer

    Visualise the layoutsubtree attribute: elements with it set remain in flow (occupying space, receiving events) but are invisible in the normal paint tree. Toggle layoutsubtree on and off and inspect the resulting layout vs visual output.

  3. Canvas Renderer

    Render a live DOM card — including CSS variables, custom styles, and dark mode — directly into a 2D canvas via ctx.drawElement(). Switch themes, click Render, then download the result as PNG or apply canvas post-processing like invert.

  4. Thumbnail Generator

    Select a content card from a list and render a canvas thumbnail via ctx.drawElement(). Shows the practical use case: generating social-share previews or card thumbnails from live HTML without SVG serialisation or html2canvas.

  5. Social Card Generator

    Compose a social share card with title, tagline, URL, author, and theme — the card is a live HTML element that gets painted to canvas via ctx.drawHtmlElement() then offered for download as PNG. Includes six color themes and falls back to direct canvas drawing when the API is not available.

why it shipped

For two decades, the only way to render HTML into a canvas was foreignObject inside an SVG, serialised to a data: URL, drawn with drawImage() — a lossy, async, tainting hack that breaks fonts, external resources, and security models. Game engines, data-visualisation tools, WebXR UIs, and whiteboard apps resorted to re-implementing entire rendering pipelines in JavaScript. HTML-in-canvas closes the gap: the browser's own layout and paint engine does the work, the result is a live GPU texture, and the DOM element remains a fully functional DOM element — accessible, searchable, translatable, and inspectable. Shipped as an origin trial in Chrome 148 so developers can stress-test the API before it becomes a baseline feature.

references

implementation reference

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