Festival Homepage

This experiment renders a complete festival homepage through the HTML-in-Canvas API. A full-viewport video background plays behind all content, while the page's scrollable sections — hero, ticket guide, merch, lineup, info, experience, and camping — are children of a canvas element with the layoutsubtree attribute. The browser lays out the DOM children normally, but defers painting until the onpaint handler calls drawElementImage() for each section. This draws the fully-styled HTML into the canvas buffer at the correct scroll position, then returns a transform matrix applied back to each element for hit testing and accessibility. The canvas is sized to the total height of all sections multiplied by devicePixelRatio for retina sharpness. On resize, the canvas dimensions recalculate and requestPaint() triggers a fresh draw. A fixed header with backdrop blur sits outside the canvas as a UI overlay. It hides on scroll down and reappears on scroll up using scroll direction detection in a requestAnimationFrame callback. On mobile, the navigation collapses to a hamburger that opens a full-screen modal. Video controls in the bottom right toggle play/pause and mute/unmute on the background video. The festival name and data are pulled from Redis at request time, with a random qualifying festival selected on each page load.