HTML‑in‑Canvas Lets Browsers Render Games and Doom‑Style Effects

HTML‑in‑Canvas is a new experimental Web API that treats a webpage as a game screen by rendering HTML elements into a bitmap and painting that bitmap onto a <canvas> element.

Because the rendering target is a pixel buffer rather than the DOM, developers can manipulate each pixel directly, enabling effects such as shaders, physics integration, and per‑frame animation that were previously difficult or impossible with traditional DOM‑based layouts.

The approach brings three noticeable changes: (1) previously hard‑to‑implement visual effects become easy, since the canvas operates on pixels; (2) UI layout becomes more diverse, allowing fish‑eye, perspective scrolling, and other non‑linear designs; (3) web animation adopts the same frame‑by‑frame logic used by game engines, making webpages look like game scenes.

One striking demonstration shows HTML content being captured, reduced to a 256‑color palette, and used as wall textures inside the classic game Doom, so the game walls display live web pages that react to user actions.

HTML‑in‑Canvas is currently an experimental feature submitted as a proposal to the W3C Web Platform Incubator Community Group (WICG), meaning it may eventually become a native browser capability.

To try it in Chrome, follow three steps: (1) open chrome://flags/#canvas-draw-element and enable the HTML‑in‑Canvas flag; (2) add the layoutsubtree attribute to the target <canvas> element; (3) obtain the 2D context with getContext('2d') and call drawElementImage() to paint child elements onto the canvas.

Early adopters have created experimental demos such as a "Mission‑Impossible" desktop‑in‑desktop effect, a spam‑filtering login form where input fields warp, distort, or drift, and various creative visual tricks that challenge conventional UI design.

Compared with the recent Pretext project, which offloads text layout from the browser, HTML‑in‑Canvas goes further by taking away the entire UI rendering pipeline, offering a more disruptive shift in front‑end development.

I rarely call something a "game‑changing" moment, but HTML‑in‑Canvas might be exactly that – a "return of Flash" for the modern web.

I’ve been waiting my whole life for this Web API.

Commentators note that the web is the natural carrier for AI, and that generative AI will become the ultimate form of UI, creating pages on‑the‑fly at the moment a user clicks a link, with each frame uniquely generated.

With related technologies like WebGPU and WebAssembly also moving toward standardization, the performance ceiling of the web is expected to be dramatically raised, making future webpages as spectacular and unconstrained as games.

HTML‑in‑Canvas therefore represents a potential starting point for AI‑driven, game‑like web experiences.