The experimental HTML in Canvas API lets developers render real, interactive HTML elements as pixels inside a canvas element, enabling GPU-powered visual effects while preserving DOM semantics and interactivity. Enabled via a Chrome flag (chrome://flags/#canvas-draw-element), the API uses a `layoutsubtree` attribute, `requestPaint()`, and `drawElementImage()` to capture HTML as a canvas texture. The post walks through core concepts: basic setup, canvas sizing with ResizeObserver, synchronizing transforms between DOM and canvas, pixel-level manipulation using getImageData/putImageData, mouse-driven distortion effects, animation render loops, and finally a WebGL shader pipeline using `gl.texElementImage2D()` to apply GPU effects like ripples, drag tension, and ambient animations to live HTML content.
Table of contents
Basic Elements of HTML in CanvasWrite JavaScriptThe Thing About SizeMoving Things AroundBasic Pixel ManipulationMoving Pixels AroundMouse InteractionRender LoopNow for the Serious Stuff: ShadersThe Smallest Shader PipelineSame Pipeline, Wildly Different ShadersFinal ThoughtsSort: