{"id":9400,"date":"2026-04-21T08:34:17","date_gmt":"2026-04-21T13:34:17","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=9400"},"modified":"2026-04-21T09:00:29","modified_gmt":"2026-04-21T14:00:29","slug":"the-web-is-fun-again-first-experiments-with-html-in-canvas","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-web-is-fun-again-first-experiments-with-html-in-canvas\/","title":{"rendered":"The Web Is Fun Again: First Experiments with HTML in Canvas"},"content":{"rendered":"\n

Every once in a while, the platform drops something that makes you want to build strange demos again, or at least weirder ones. The new HTML in Canvas API<\/a> is a perfect example of one of those moments.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\n

Support Status (Important)<\/strong><\/p>\n\n\n\n

To enable it, go to chrome:\/\/flags\/#canvas-draw-element<\/code> and turn on the “Canvas Draw Element” flag. After enabling, you can start experimenting with the API in your local environment.<\/p>\n\n\n\n

As of now, this API is still experimental, only available in Chromium-based browsers (146+) and behind a flag. That means you need to enable it manually to experiment with it, and it is not yet a production-ready feature.<\/p>\n\n\n\n

The main demos below have a collapsed video after them so you can see the effect if you happen to be in a non-supporting browser.<\/p>\n<\/div><\/div>\n\n\n\n