HTML-in-Canvas feels fake the first time it works.

Real DOM.

Real CSS.

Real layout.

Inside canvas.

You write a tiny canvas.onpaint , call drawElementImage() , and the browser just… does it. Your styled HTML is suddenly part of a canvas frame.

Beautiful.

Then you try to build an actual app.

Now you have multiple surfaces, resize logic, export timing, React unmounts, cleanup, invalidation, and the classic:

wait, is this number CSS pixels or canvas pixels?

That's the part where the cool browser primitive turns into lifecycle work.

So I built Prism.

First: what is HTML-in-Canvas?

The WICG HTML-in-Canvas proposal lets a canvas render real HTML elements directly.

Not screenshots.

Not html2canvas .

Not SVG foreignObject .

Actual DOM, painted into a canvas frame by the browser.

A tiny example looks like this:

<canvas id= "canvas" layoutsubtree > <div id= "panel" style= "width: 400px; height: 200px" > <h2> Real HTML </h2> <p> Real CSS. Real fonts. Real layout.…