@easemate/capture

DOM-to-canvas capture, watch, clone & swap — side-by-side comparison

Static Captures
DOM Element

Gradient Card

Tests gradient, border-radius, and box-shadow capture.

Canvas Capture
Capturing...
DOM Element
Canvas Capture
Capturing...
DOM Element
Jane Cooper
Product Designer at Acme
Canvas Capture
Capturing...
DOM Element — edit inputs then start watch to see live updates
Canvas Capture
Capturing...
DOM Element
SVG
Canvas Capture
Capturing...
DOM Element
1
2
3
4
5
6
7
8
9
Canvas Capture
Capturing...
DOM Element
Backdrop Blur
Canvas Capture
Capturing...
DOM Element
Text Gradient
Canvas Capture
Capturing...
DOM Element (hidden)

This element is hidden via CSS but should still be captured correctly using isolateAndForceVisibility.

Canvas Capture
Capturing...
Watch & Dynamic Updates
DOM Element (live counter)
0
Auto-incrementing counter (watch tracks mutations)
Stopped
Canvas Capture (live)
Waiting for watch...
Hide Original (DOM ↔ Canvas Swap)
DOM Element (will be hidden)

Swap Target

Watch with hideOriginal hides this DOM element and shows the canvas in its place.

Canvas Replacement
Waiting for swap...
Multi-Element Capture
DOM Elements
A
B
C
D

Element B

Second element

Canvas Captures
Capturing...
Lifecycle Hooks
DOM Element

Hook Test

Capture with all lifecycle hooks logging.

Hook Log
Capturing...
Speed Balanced Detail Re-capture All Visibility Display Start Swap Stop Swap Run Hooks Capture Re-capture Multi Export as Data URL Export as Blob Flush Stop