Page Curl / Book Turn

Drag from the right edge to turn the page. Two live HTML pages render as WebGL textures with a real-time cylindrical page-curl deformation.

Chapter One

The Promise of
the Canvas

For decades, the web platform drew a hard line between structured documents and free-form graphics. HTML gave you semantics, accessibility, and rich layout. Canvas gave you pixels, speed, and creative freedom. You could have one or the other — never both.

That wall is coming down. The HTML-in-Canvas specification introduces a bridge between these two worlds: the ability to render live, styled DOM elements directly into a canvas bitmap, at full frame rate, with no rasterization hacks or library workarounds.

Imagine CSS transitions flowing through WebGL shaders. Interactive forms embedded in 3D environments. Styled text that shatters into particles. This is not a future possibility — it is happening now.

— 1 —
1
“Any sufficiently advanced technology is indistinguishable from magic.” — Arthur C. Clarke

Consider what becomes possible when HTML elements — with all their CSS styling, font rendering, and interactive behaviors — can flow into a canvas context as naturally as drawing a rectangle.

const ctx = canvas.getContext('2d');
ctx.drawElementImage(el, 0, 0);

// That's it. The styled DOM
// element is now pixels in
// your canvas.

No rasterization libraries. No html2canvas workarounds. No cross-origin restrictions on your own content. Just the platform, doing what it should have always done.

— 2 —
HC

drag from the right edge to turn the page — or watch the auto-animation

1. Two HTML “book pages” live inside <canvas layoutsubtree> elements — fully styled with CSS fonts and layout

2. drawElementImage() captures each page’s DOM into a 2D canvas bitmap

3. Both bitmaps become WebGL textures fed to a page-curl fragment shader

4. A cylindrical deformation creates the curl — the back face shows the next page’s content, correctly mirrored

Previously impossible: rendering styled HTML as a deformable 3D surface required rasterizing the DOM manually with external libraries.