SnapDOM vs html2canvas

A quick overview

html2canvas works by reading the DOM and re-painting every element onto a <canvas> using its own CSS engine. It has been around since 2012, has wide adoption, and a long backlog of edge cases that come from re-implementing the browser's renderer.

SnapDOM takes a different approach: it deep-clones the DOM, inlines the styles, fonts and images, and wraps the clone in an SVG <foreignObject>. The browser does the actual rendering, which means anything the browser can paint, SnapDOM can capture — including pseudo-elements, CSS variables, custom counters and Shadow DOM.

Feature matrix

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, no intermediate canvas. If you do need a canvas, call snapdom.toCanvas(el) instead.

Migration in 5 minutes

The two libraries cover the same surface for the most common operations. Here's the 1:1 mapping:

A typical migration boils down to a one-line change:

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

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