Live HTML Shatter

The experimental WICG drawElementImage API lets a 2D canvas paint a live DOM element as an image — every frame, the element is sampled in its current rendered state. The element remains a real, interactive node: it receives clicks, focus, IME input, and assistive tech, even though pixels of it are being copied into a canvas redraw loop.

This demo points a reticle at a small mock page rendered as the canvas's direct child. Switch to shooting mode and click the page to blast out one large jagged piece. The missing area stays punched through to the black stage, while the flying piece keeps re-sampling the live DOM underneath as it tumbles away. Switch back to interact mode and the form remains a real page: focus the email input, click the button, and keep editing the underlying HTML.

How it works

Each frame:

1. The canvas is cleared.
2. ctx.drawElementImage(target, x, y) rasterizes the live HTML into the canvas at the target's CSS-pixel position.
3. Previously-shot jagged masks are filled black over the live page render, leaving persistent holes and crack lines.
4. For every active piece, ctx.drawElementImage(target, sx, sy, sw, sh, dx, dy, dw, dh) re-samples the same source rect through the same jagged clip path — so pieces always show current pixels, not a snapshot.
5. In shooting mode, a custom reticle is drawn last on top.

Spec notes

• Method: ctx.drawElementImage(element, dx, dy, dw?, dh?) with an optional source-rect form (element, sx, sy, sw, sh, dx, dy, dw, dh).
• The canvas must carry the layoutsubtree attribute and the element must be a direct child.
• Element CSS transforms are ignored for drawing but still affect DOM hit-testing — this demo draws 1:1 so the identity transform is correct for clicks on the input and button.
• Cross-origin images and iframes will not render. System colors and visited-link styling are filtered for privacy.

Browser support

drawElementImage is behind a flag in Chromium (April 2026): chrome://flags/#canvas-draw-element. With the flag off, the page renders a styled fallback of the same mock card and shows the flag URL with a copy button. No html2canvas, no three.js — the entire effect is one canvas, one DOM subtree, and a tiny shard struct.

Tech

• Single 2D canvas; live element is a direct child of the canvas with the layoutsubtree attribute.
• requestAnimationFrame loop with dt-based physics (GRAVITY, MAX_SPIN, PIECE_LIFETIME).
• Per-piece 3D-tumble illusion via a cos(phase)-driven scale on one axis combined with planar rotation.
• Interact/shoot mode state decides whether canvas clicks reach the real form controls or become shots.
• Feature-detection probes 'drawElementImage' in CanvasRenderingContext2D.prototype; missing support falls through to a styled instructional overlay.
• useReducedMotion from framer-motion disables shooting while keeping the live blit and form interaction.