The Web Is Fun Again: First Experiments with HTML in Canvas

"The promise is simple and exciting: take native HTML, render it into canvas workflows, and then apply visual effects with 2D Canvas, WebGL, or WebGPU. In other words, you can keep real semantic elements in your markup while treating their rendered output as pixels."

"Putting content inside the canvas means it is treated as real DOM elements, and you can interact with them as usual, but they are not rendered until you explicitly draw them into the canvas."

"Notice that I added the layoutsubtree attribute to the canvas, this is mandatory for the HTML-in-Canvas API to work, as this attribute opts canvas descendants into layout and hit testing so they behave like real DOM content."

The HTML in Canvas API enables the rendering of native HTML elements within canvas workflows, allowing for the application of visual effects using 2D Canvas, WebGL, or WebGPU. This integration maintains semantic HTML while treating rendered output as pixels. The layoutsubtree attribute is essential for enabling layout and hit testing for canvas descendants, making them behave like real DOM elements. JavaScript APIs are used to reference the canvas and trigger the rendering process through canvas.requestPaint().

Read at Frontendmasters