SnapDOM vs html2canvas

A quick overview

html2canvas reads the DOM and paints elements onto a <canvas>. Its default renderer implements CSS support itself, so its supported properties and output can differ from the browser's page rendering.

SnapDOM clones the DOM, inlines styles and accessible fonts and images, and wraps the clone in an SVG <foreignObject>. It handles pseudo-elements, CSS variables, counters and open Shadow DOM, subject to browser rendering and resource-access limits.

Feature matrix

Support varies by fixture and rendering mode; test your own UI. See the live benchmark for its pixel fixtures and loaded versions.

Run the live benchmark suite locally with npm run test:benchmark to reproduce the numbers on your hardware — performance varies a lot depending on element complexity, fonts and image content.

When to use which

Same task, side by side

Capturing #card as a PNG and inserting the resulting image into the page:

html2canvas

import html2canvas from 'html2canvas';

const canvas = await html2canvas(document.querySelector('#card'));
const img = new Image();
img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);

SnapDOM

import { snapdom } from '@zumer/snapdom';

const img = await snapdom.toPng(document.querySelector('#card'));
document.body.appendChild(img);

SnapDOM returns the HTMLImageElement ready to be appended — no manual toDataURL call. If you do need a canvas, call snapdom.toCanvas(el) instead.

Migration notes

Common operations have equivalents, but image return types and option meanings differ. These examples preserve the requested output format:

For a Canvas consumer, start with this change and compare the output:

// Before
import html2canvas from 'html2canvas';
const canvas = await html2canvas(el, { scale: 2 });

// After
import { snapdom } from '@zumer/snapdom';
const canvas = await snapdom.toCanvas(el, { dpr: 2 });