v138 · graphics

HTML-in-canvas

HTML-in-canvas enables customizing the rendering of html using canvas with three new primitives: an attribute to opt-in canvas elements (layoutsubtree), methods to draw child elements (2d: drawElementImage, webgl: texElementImage2D, webgpu: copyElementImageToTexture), and a paint event which fires to handle updates.

concepts

  1. HTML in Canvas

    drawElement() rasterises a live DOM subtree into a 2D canvas. Lets canvas-based apps composite real UI on top without manual rendering.

  2. Screenshot export

    The html2canvas use case made native. Edit a form, capture the DOM into a canvas, download as a 2× retina-quality PNG — the browser’s real compositor doing the rasterisation.

  3. WebGL texture feed

    The 3D case: a live DOM subtree uploaded as a GPU texture via texElementImage2D, wrapped onto a spinning textured quad. Type into the input and the texture updates next frame.

  4. paintsubtree event loop

    The third primitive — the paintsubtree event. A live dashboard mutates every N ms; the event fires once per frame and the canvas re-uploads. No polling, no missed updates, event-rate counter included.

  5. DOM Compositor

    Composite multiple independent DOM elements — report card, badge, bar chart, watermark — onto one canvas, each with its own opacity, rotation, and x/y offset. Shows the full compositing model: globalAlpha + ctx.save()/restore() + per-element drawElement().

  6. Live Thumbnail

    A contenteditable document on the left; a live minimap canvas on the right that re-rasterises on every keystroke via drawElement(). Configurable update rate (input, rAF, interval), scale slider, and PNG download. Shows the real-time thumbnail / minimap use case.

why it shipped

High-performance web applications rely on <canvas> for control over rendering that goes beyond standard HTML/CSS. However, by using <canvas>, they lose all the rich, built-in features of the web platform, including: * Advanced formatting, such as styled multi-line text. * Interactivity, such as forms, selection, and native scrolling. * Accessibility. This forces a bad trade-off: developers must either re-implement these fundamental browser features in JS, or simply not provide them, resulting in a sub-par, inaccessible user experience.

references