Demos
Interactive examples showcasing the HTML-in-Canvas specification.
3D Room with Live Web Content
A Three.js first-person 3D room where live HTML elements are rendered as textures on surfaces — a monitor dashboard, a styled poster, and a TV playing CSS animations.
Accessible Charts
Bar and pie charts with real HTML labels, ARIA roles, keyboard navigation, and focus rings via drawFocusIfNeeded.
CSS-to-Shader Pipeline
Live GLSL shader editor where any HTML element becomes a WebGL texture — edit CSS on the left, apply fragment shaders like chromatic aberration, CRT scanlines, and halftone in real-time.
Frosted Glass Backdrop
Draggable frosted glass panel with custom gaussian, directional, and tilt-shift blur effects composited between HTML rendering layers.
Hello World
The simplest HTML-in-Canvas demo — a styled div drawn into canvas with drawElementImage, showing the minimal boilerplate with annotated code.
HTML-to-Image Export
Social card / OG image generator — edit rich HTML content and export as PNG or JPEG via canvas.toBlob(). A native replacement for html2canvas.
HTML Video Recording
Record animated HTML content as WebM video — type a message, watch it animate with CSS, hit record, and download the clip via canvas.captureStream() + MediaRecorder.
Interactive Form
A full HTML form rendered inside canvas — inputs, checkboxes, selects, sliders, and buttons all remain fully interactive, proving that typing, clicking, and tabbing work natively.
Internationalized Text
Side-by-side comparison of ctx.fillText() vs drawElementImage for complex scripts — RTL, vertical CJK, Thai diacritics, mixed-direction, emoji with skin tones, and ruby annotations.
Liquid Glass Distortion
A richly styled HTML card rendered into a WebGL canvas with a real-time liquid glass refraction shader. Mouse movement warps the glass while the HTML content underneath stays live and interactive.
Morphing Text Transitions
Two distinct HTML text layouts morph between each other using canvas pixel manipulation — crossfade, dissolve, wave wipe, and pixel sort transitions that CSS alone cannot achieve across different DOM structures.
Multi-Element Composition
Multiple draggable canvas children drawn at different positions with transforms, demonstrating z-ordering, changedElements paint data, and multi-element management.
OffscreenCanvas Worker
Captures HTML as a transferable ElementImage and sends it to a Web Worker for rendering on an OffscreenCanvas, demonstrating the worker communication pattern with postMessage.
Page Curl / Book Turn
Two HTML pages with rich content drawn as WebGL textures on planes that simulate a realistic page-curl/book-turn animation. Drag to turn the page. The backside shows the next page's content with correct mirroring.
Pixel Disintegration
A richly styled HTML profile card rendered into canvas, then disintegrated into thousands of color-sampled particles on click. Particles explode outward with physics-based drift, then reassemble on a second click — a Thanos snap effect powered by getImageData.
Rich Text Canvas Editor
A contenteditable div rendered into canvas with real-time effects — drop shadow, neon glow, and outline — that go beyond CSS. Edit text with native browser selection, copy/paste, and undo.
No demos match the current filters.