Rendering Web Content to Images: dom-to-image vs html-to-image vs html2canvas vs screenshot-desktop

Capturing visual representations of web content is a common need — from generating social media previews to creating PDF reports or saving user-designed layouts. The four packages under review solve overlapping but distinct problems in this space. Let’s break down their technical approaches, capabilities, and trade-offs.

🖼️ Core Purpose and Rendering Strategy

dom-to-image, html-to-image, and html2canvas all convert DOM elements into raster images (PNG, JPEG, etc.) directly in the browser using JavaScript. They do not require a headless browser or external process.

screenshot-desktop, by contrast, captures screenshots of the entire desktop or specific windows — it runs only in Node.js and requires system-level access. It cannot render arbitrary HTML; it only snapshots what’s already visible on screen.

⚠️ Important: screenshot-desktop is not a web content renderer. If your goal is to turn HTML/CSS into an image programmatically (e.g., for a chart, dashboard widget, or user-generated design), screenshot-desktop is not applicable.

🧪 Browser-Based Rendering: How dom-to-image, html-to-image, and html2canvas Work

All three browser-based libraries parse the DOM, apply computed styles, and draw the result onto an HTML <canvas>. However, their implementation strategies differ significantly.

html2canvas: Pixel-Perfect Simulation via Canvas Replay

html2canvas attempts to replay the rendering process by walking the DOM tree, reading computed styles, and manually redrawing everything onto a canvas using the Canvas 2D API. It supports many CSS features (like border-radius, box-shadow, transforms) but has known limitations with complex layouts (e.g., flex, grid, clip-path).

// html2canvas: Basic usage
import html2canvas from 'html2canvas';

const element = document.getElementById('capture');
html2canvas(element).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  // Use imgData as needed
});

It offers fine-grained control via options like scale, useCORS, and logging:

html2canvas(element, {
  scale: 2,
  useCORS: true,
  logging: false
}).then(canvas => { /* ... */ });

dom-to-image: SVG Serialization + Rasterization

dom-to-image takes a different approach: it serializes the target node to an inline SVG, embedding fonts and external resources as data URLs, then draws that SVG onto a canvas. This often yields better fidelity for vector-like content (text, icons, simple shapes) but struggles with advanced CSS effects that don’t translate cleanly to SVG.

// dom-to-image: Basic usage
import domtoimage from 'dom-to-image';

const node = document.getElementById('capture');
domtoimage.toPng(node)
  .then(dataUrl => {
    // Use dataUrl
  })
  .catch(error => console.error('Error:', error));

It provides multiple output formats (toPng, toJpeg, toSvg, toCanvas) and supports filtering nodes:

const filter = (node) => !(node instanceof HTMLIFrameElement);
domtoimage.toPng(node, { filter });

🔍 Note: dom-to-image appears to be unmaintained. Its npm page shows no recent updates, and the GitHub repo (tsayen/dom-to-image) has unresolved issues and open pull requests dating back years. Use with caution in new projects.

html-to-image: A Modern Fork of dom-to-image

html-to-image is a community-maintained fork of dom-to-image that addresses many bugs and adds new features (like better font handling, improved CORS support, and TypeScript definitions). It uses the same SVG serialization strategy but with active development and better reliability.

// html-to-image: Basic usage
import { toPng } from 'html-to-image';

const node = document.getElementById('capture');
toPng(node)
  .then(dataUrl => {
    // Use dataUrl
  })
  .catch(error => console.error('Error:', error));

It also supports custom styling overrides and pixel ratio control:

const options = {
  pixelRatio: 2,
  style: { margin: '0' }
};
toPng(node, options);

💻 Desktop Screenshot: screenshot-desktop

screenshot-desktop operates entirely outside the browser context. It leverages native OS APIs (via Node.js bindings) to capture screenshots. It’s useful for automated UI testing, desktop app monitoring, or capturing full-screen content — but not for rendering dynamic HTML.

// screenshot-desktop: Capture entire screen
import screenshot from 'screenshot-desktop';

screenshot().then(imgBuffer => {
  // imgBuffer is a Buffer containing PNG data
});

// Or capture a specific window by title
screenshot({
  screen: 0,
  format: 'png',
  filename: 'output.png'
});

Key limitations:

• Only works in Node.js environments (not in browsers).
• Cannot render arbitrary HTML — only captures what’s already rendered by the OS.
• Requires appropriate permissions on macOS and Linux.

📏 Feature Comparison: What Each Package Handles Well

External Resources (Images, Fonts)

• html2canvas: Supports images via useCORS: true but may fail with cross-origin fonts unless properly configured.
• dom-to-image: Embeds images/fonts as data URLs but often fails silently with CORS-protected assets.
• html-to-image: Improved CORS handling; can proxy external resources through a server if needed.
• screenshot-desktop: N/A — it captures pixels as displayed by the OS.

CSS Support

• html2canvas: Best for basic layout and styling. Struggles with modern CSS (e.g., backdrop-filter, complex gradients).
• dom-to-image / html-to-image: Better with text and vector graphics, but limited with CSS-only effects (shadows, blends).

Performance

• html2canvas: Can be slow on large/complex DOM trees due to deep traversal and canvas drawing.
• html-to-image: Generally faster than dom-to-image due to optimizations, but still blocks the main thread.
• screenshot-desktop: Very fast (native OS call), but irrelevant for in-browser rendering.

🛠️ Real-World Decision Guide

When to use html2canvas

• You need to capture moderately complex UIs with standard CSS.
• You’re okay with occasional rendering inaccuracies for the sake of broad compatibility.
• You require fine control over the rendering pipeline (e.g., custom hooks for element processing).

When to use html-to-image

• You want better text/font rendering and are working with mostly static, vector-friendly content.
• You need active maintenance and TypeScript support.
• You’re capturing charts, diagrams, or user-designed cards where pixel-perfect layout isn’t critical.

When to avoid dom-to-image

• In new projects, due to lack of maintenance. Prefer html-to-image instead.
• If you rely on features that have been fixed only in the fork (e.g., proper z-index handling).

When to use screenshot-desktop

• You’re building a Node.js desktop automation tool.
• You need to capture native application windows or full-screen content.
• Your use case is outside the browser entirely (e.g., end-to-end testing of Electron apps).

🔄 Migration Note: dom-to-image → html-to-image

If you’re currently using dom-to-image, migrating to html-to-image is straightforward:

// Before (dom-to-image)
import domtoimage from 'dom-to-image';
domtoimage.toPng(node);

// After (html-to-image)
import { toPng } from 'html-to-image';
toPng(node);

The API is nearly identical, but html-to-image exports individual functions instead of a single object.

📌 Summary Table

💡 Final Recommendation

• For in-browser HTML-to-image conversion, choose html-to-image for most new projects — it’s reliable, maintained, and handles common cases well.
• Fall back to html2canvas if you’re dealing with complex CSS layouts that don’t translate well to SVG.
• Avoid dom-to-image in new codebases.
• Use screenshot-desktop only when you genuinely need to capture desktop pixels — never for rendering HTML programmatically.