Capturing Visual Snapshots in JavaScript Applications
html2canvas and modern-screenshot render DOM elements to images directly in the browser, enabling client-side features like user-generated previews. puppeteer controls a headless Chrome instance from Node.js to capture full pages or specific elements server-side, ideal for automation and testing. screenshot-desktop captures the actual operating system screen buffer, used primarily in Electron apps or Node scripts needing monitor-level access.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Capturing Visual Snapshots in JavaScript Applications
Choosing the right tool for screenshots depends on where your code runs and what exactly you need to capture. html2canvas and modern-screenshot work inside the browser to turn DOM nodes into images. puppeteer runs on the server to control a real browser engine. screenshot-desktop bypasses the browser entirely to grab the operating system's screen buffer. Let's break down how they handle real-world tasks.
🖥️ Where Code Runs: Browser vs. Server vs. OS
html2canvas runs entirely in the user's browser.
- It reads the DOM and paints it onto an HTML5 canvas.
- No server setup is needed, but it relies on the client's device power.
// html2canvas: Client-side execution
import html2canvas from 'html2canvas';
const element = document.getElementById('profile-card');
html2canvas(element).then((canvas) => {
document.body.appendChild(canvas);
});
modern-screenshot also runs in the browser.
- It is designed as a lighter or faster alternative for DOM rendering.
- Like
html2canvas, it executes on the client without server dependencies.
// modern-screenshot: Client-side execution
import { domToPng } from 'modern-screenshot';
const node = document.getElementById('app-root');
domToPng(node).then((dataUrl) => {
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = dataUrl;
link.click();
});
puppeteer runs in Node.js on the server or local machine.
- It launches a headless Chrome instance to load pages.
- Requires a server environment and cannot run directly in user browsers.
// puppeteer: Server-side execution
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
screenshot-desktop runs in Node.js or Electron.
- It accesses the operating system's display hardware directly.
- Captures what is visible on the monitor, not just the browser window.
// screenshot-desktop: OS-level execution
const screenshot = require('screenshot-desktop');
screenshot().then((img) => {
// img is a Buffer containing the screen capture
require('fs').writeFileSync('screen.png', img);
});
🎨 Rendering Fidelity: DOM Paint vs. Engine Render
html2canvas reimplements CSS rendering in JavaScript.
- It supports most standard CSS but can miss complex features like advanced filters.
- Cross-origin images often break unless CORS headers are set correctly.
// html2canvas: Handling CORS
html2canvas(element, {
useCORS: true
}).then((canvas) => {
// Handle canvas
});
modern-screenshot aims to improve on DOM rendering limits.
- It targets better support for modern CSS properties.
- Still faces similar cross-origin restrictions as any client-side tool.
// modern-screenshot: Options for fidelity
domToPng(node, {
features: {
debug: false
}
}).then((dataUrl) => {
// Handle data URL
});
puppeteer uses the actual Chrome rendering engine.
- It captures pixels exactly as Chrome sees them, including web fonts.
- Best for high-fidelity needs where CSS accuracy is critical.
// puppeteer: Full page capture
await page.screenshot({
path: 'full.png',
fullPage: true
});
screenshot-desktop captures raw pixels from the GPU.
- It does not understand DOM or CSS at all.
- Useful for capturing native UI elements outside the browser window.
// screenshot-desktop: Specific screen selection
screenshot({ screen: 0 }).then((img) => {
// Capture primary monitor only
});
🛠️ Common Use Cases
1. User-Generated Content Previews
You want users to download an image of their customized profile card.
- ✅ Best choice:
html2canvasormodern-screenshot - Why? It happens instantly in the browser without server costs.
// Client-side download
html2canvas(document.querySelector('#preview')).then((canvas) => {
const link = document.createElement('a');
link.download = 'my-profile.png';
link.href = canvas.toDataURL();
link.click();
});
2. Automated Visual Testing
You need to verify that your production site looks correct after deployment.
- ✅ Best choice:
puppeteer - Why? It runs in CI/CD pipelines and captures exact browser renders.
// CI/CD Screenshot
await page.screenshot({ path: './baseline/homepage.png' });
3. Desktop App Support Tools
You are building an Electron app and need to capture the user's workspace for a bug report.
- ✅ Best choice:
screenshot-desktop - Why? It captures other open windows, not just your app.
// Electron main process
const img = await screenshot({ format: 'png' });
4. PDF Report Generation
You need to generate a downloadable PDF of a long dashboard.
- ✅ Best choice:
puppeteer - Why? It handles pagination and full-page scrolling better than canvas tools.
// PDF Generation
await page.pdf({ path: 'report.pdf', format: 'A4' });
📊 Summary Table
| Feature | html2canvas | modern-screenshot | puppeteer | screenshot-desktop |
|---|---|---|---|---|
| Environment | Browser | Browser | Node.js | Node.js / Electron |
| Target | DOM Element | DOM Element | URL / Page | Monitor Screen |
| CSS Support | Good (JS reimplementation) | Better (Modern focus) | Perfect (Chrome Engine) | None (Raw Pixels) |
| Server Required | No | No | Yes | Yes |
| Cross-Origin | Strict (Needs CORS) | Strict (Needs CORS) | None (Server fetches) | N/A |
💡 Final Recommendation
html2canvas is the safe bet for client-side DOM capture. It has a large community and predictable behavior for standard HTML. Use it for user-facing features where server load is a concern.
modern-screenshot is worth testing if html2canvas fails on specific CSS features. It serves the same role but may handle modern styles better.
puppeteer is the professional standard for server-side automation. Use it for testing, PDFs, or when you need pixel-perfect accuracy that only a real browser engine can provide.
screenshot-desktop is a niche tool for Electron or Node utilities. Use it only when you need to capture the actual monitor output, such as for support tools or desktop automation.
Final Thought: Match the tool to the environment. If the code runs in the browser, pick html2canvas or modern-screenshot. If it runs on the server, pick puppeteer. If you need the OS screen, pick screenshot-desktop.
How to Choose: html2canvas vs modern-screenshot vs puppeteer vs screenshot-desktop
- html2canvas:
Choose
html2canvaswhen you need a stable, widely-supported solution for converting HTML elements to images directly in the user's browser. It is the standard choice for features like 'save profile as image' or generating previews without server involvement, though it may struggle with complex CSS. - modern-screenshot:
Choose
modern-screenshotif you need a client-side DOM renderer that aims for better performance or newer CSS support thanhtml2canvas. It fits the same use cases ashtml2canvasbut may offer improvements in rendering speed or fidelity for modern browsers. - puppeteer:
Choose
puppeteerwhen you need high-fidelity screenshots from a Node.js environment, such as generating PDF reports, visual regression testing, or capturing full-page scrolls that client-side tools cannot handle reliably. - screenshot-desktop:
Choose
screenshot-desktoponly when you need to capture the user's entire monitor or specific screen regions from a Node.js or Electron application. It is not for DOM rendering but for OS-level screen capture tasks.
Popular Comparisons
README for html2canvas
html2canvas
Homepage | Downloads | Questions
JavaScript HTML renderer
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.
How does it work?
The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.
It does not require any rendering from the server, as the whole image is created on the client's browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs. It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin.
The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made.
Browser compatibility
The library should work fine on the following browsers (with Promise polyfill):
- Firefox 3.5+
- Google Chrome
- Opera 12+
- IE9+
- Safari 6+
As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
Usage
The html2canvas library utilizes Promises and expects them to be available in the global context. If you wish to
support older browsers that do not natively support Promises, please include a polyfill such as
es6-promise before including html2canvas.
To render an element with html2canvas, simply call:
html2canvas(element[, options]);
The function returns a Promise containing the <canvas> element. Simply add a promise fulfillment handler to the promise using then:
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
Building
You can download ready builds here.
Clone git repository:
$ git clone git://github.com/niklasvh/html2canvas.git
Install dependencies:
$ npm install
Build browser bundle
$ npm run build
Examples
For more information and examples, please visit the homepage or try the test console.
Contributing
If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.