html-in-canvas-polyfill examples

A polyfill for the proposed HTML-in-Canvas API (<canvas content="drawable">, drawElementImage, the paint event). Each page below draws live HTML into a canvas: click and type into what you see.

• plugins: the effect gallery: pick a WebGPU effect plugin and apply it to one live form, with its controls, its actions and a frame cap slider (falls back to 2D without WebGPU).
• effect-plugin: the smallest page with effects: the effects host, the water plugin, a frame cap, and a disintegrate transition run from the page's submit handler (falls back to 2D without WebGPU).
• basic: the WICG explainer example, unchanged.
• form: a contact form drawn with drawElementImage from onpaint.
• scroll-and-resize: a scrolling list and a responsive layout inside one canvas.
• webgl-texture: a spinning cube textured with a live form (texElementSubImage2D).

Field test: a five-minute guided check of this polyfill on your own device (Windows, a phone, another Mac). It compares the canvas with the plain page as your screen shows them, measures typing and scrolling, and ends with one report file to send back. Nothing is sent anywhere by the page.

The effect plugins and the frame cap are extensions of this library, not part of the HTML-in-Canvas proposal; browsers' native implementations do not provide them, and this library runs them over the polyfill and over a native implementation alike.

Tested: desktop Chrome, Firefox 155+ and Safari 27+ (other desktop Chromium browsers are expected to work, unverified); Safari on iOS / iPadOS 26+ and Chrome for Android 130+ on simulators and emulators only. In a browser with a complete native implementation the polyfill steps aside, and the effects run over the browser's own implementation. Elsewhere (older browsers, web views inside apps, Firefox for Android) it refuses with one console warning and the examples say so on the page.

Source, documentation and known limitations: github.com/GiuseppeScottoLavina/html-in-canvas-polyfill.