🎬 Video Frame New
<video> pixels are painted by the GPU compositor and don't serialize into <foreignObject>. The pattern: draw the current frame into a <canvas>, then let SnapDOM capture it like any other node. Press play, then capture any frame. The clip is an MDN CC0 sample served with CORS so the canvas isn't tainted.
🏁 Benchmark: snapDOM vs html2canvas
Each library will capture the same DOM element to canvas 5 times. We'll calculate average speed and show the winner.
This is the benchmark test element to be captured by both libraries.
snapDOM
html2canvas
📦 Basic
Hello SnapDOM!
Transforms & Shadows
Transformed + Shadow
Capture it just with outerTransforms /
outerShadows.
🚀 Fun Transition
🕺💃
I'm dancing and changing color!
Orbit CSS toolkit - Go to repo
ORBIT
🔤 Google Fonts
Unique Typography!
Google Fonts with embedFonts: true.
🧱 Shadow DOM
🎨 Canvas
📁 Export Formats
📤 Export as
PNG, JPG & WebP.
PNG, JPG & WebP.
✨ Pseudo Elements
This element has pseudo-elements.
✂️ Clip-Path Demo
This shape uses clip-path
🌀 Mix Blend Mode
CSS background-blend-mode: multiply — a gradient image (sky + grass) blended with a blue overlay. SnapDOM captures the final rendered result.
Gradient × blue overlay = tinted result
🧩 Iframe (same-origin)
⌨️ Inputs & Textarea
🎭 Masking Effects
CSS radial mask
PNG circle mask
SVG mask
Linear gradient mask