html-in-canvas-polyfill

A polyfill for the proposed HTML-in-Canvas API that brings real, interactive HTML inside <canvas content="drawable"> to modern Safari and Firefox (and to Chrome before 157), and steps aside wherever the browser implements the API natively, as Chrome 157 does. Draw the live HTML with ctx.drawElementImage() in desktop Chrome, Firefox and Safari, and on Chrome for Android and Safari on the iPad (verified on two physical Android phones and a physical iPad, and on the Android Emulator and the iOS Simulator; Safari on the iPhone is unqualified until a physical iPhone has run the suites).

Live demo: giuseppescottolavina.github.io/html-in-canvas-polyfill/examples · Try it in the browser: playground · Field test: check it on your device (about six minutes, one report file to send back; what it measures)

The plugin gallery with the cloth plugin: an ordinary HTML form inside a canvas, printed by a WebGPU effect on a sheet of fabric. The click and the typing go to the real <input>, and the text shows on the moving cloth; at rest the canvas is the page, pixel for pixel. Recorded in headless Chrome (plugins/cloth/test/gallery.e2e.mjs --record --hero). Nine more effects over the same form are one click away in the gallery; the smallest page that uses them is examples/effect-plugin.

Why

HTML-in-Canvas lets a canvas, a WebGL scene or a WebGPU effect show live, accessible HTML: forms, text, UI. Chrome 157 ships it enabled by default (measured on 157.0.8103.39, without any flag), and so does Chrome Canary. This package provides the same API in Chrome before 157, Firefox 155+ and Safari 27+, so code written against the standard runs in those browsers too; in Chrome 157 it steps aside and the browser draws natively. It is native-first: wherever the browser implements the API in a usable form, it patches nothing of the standard surface and steps aside, and it never throws because a native build differs in a secondary member.

Quick start

From npm, for a bundler (TypeScript declarations included):

npm install @giuseppe-scotto-lavina/html-in-canvas-polyfill

A new release is published under the next tag first and moved to latest once it has been checked, so next (npm install …@next) can be one release ahead.

import { install } from '@giuseppe-scotto-lavina/html-in-canvas-polyfill';
install(); // synchronous: call it before your code uses the API; throws HicUnsupportedError in a browser it refuses

Or from a CDN, with plain script tags placed before your own scripts (no defer, async or type="module": the polyfill installs while its tag runs):

<script src="https://cdn.jsdelivr.net/npm/@giuseppe-scotto-lavina/[email protected]/dist/hic-live-polyfill.iife.min.js"></script>
<!-- Firefox and Safari: this second bundle draws form controls in those engines' look. Chrome does not need it. -->
<script src="https://cdn.jsdelivr.net/npm/@giuseppe-scotto-lavina/[email protected]/dist/hic-live-engines.iife.min.js"></script>

To download nothing in a browser that implements the API (Chrome 157), load dist/hic-live-loader.iife.min.js instead (6 KB gzipped) and await HicLiveLoader.load() before your code uses the API; it fetches the core, and the engines bundle on Firefox and Safari, only where the polyfill runs, and the native bridge with the core over an earlier native build that the bridge completes. With a bundler, import { load } from '@giuseppe-scotto-lavina/html-in-canvas-polyfill/loader' does the same through import(), which the bundler must keep split (GETTING-STARTED).

Then use the standard API. This is the explainer's own example, unchanged:

<canvas style="width: 400px; height: 200px;" content="drawable">
  <form drawable>
    <label for="name">name:</label>
    <input id="name">
  </form>
</canvas>

<script>
  const canvas = document.querySelector('canvas');
  const form = document.querySelector('canvas form');
  const ctx = canvas.getContext('2d');

  canvas.onpaint = () => {
    ctx.reset();
    ctx.drawElementImage(form, 100, 0);
  };

  // Size the canvas grid to match the device scale factor.
  new ResizeObserver((entries) => {
    canvas.width = entries[0].devicePixelContentBoxSize[0].inlineSize;
    canvas.height = entries[0].devicePixelContentBoxSize[0].blockSize;
  }).observe(canvas, { box: 'device-pixel-content-box' });
</script>

This is the beginning of the README. Read the rest at the original. Read the full README ↗