html2canvas

html2canvas is a client-side JavaScript library that takes “screenshots” of webpages or parts of a page by reading the DOM and the CSS styles applied to its elements, then reconstructing that visual state as a <canvas> element. It does not use any actual screen-capture API — instead it walks the DOM tree and manually re-implements rendering for supported CSS properties, which means output is a best-effort visual approximation rather than a pixel-perfect capture.

Because everything happens client-side, html2canvas requires no headless browser, no server-side rendering step, and no native dependencies, making it popular for exporting webpage regions to PNG/JPEG, generating client-side PDFs (combined with libraries like jsPDF), and building “share as image” or “download as image” features directly in the browser.

What You Get

• A single html2canvas(element, options) function that returns a Promise resolving to a <canvas> element
• Support for capturing arbitrary DOM subtrees, not just the full page
• Configurable options for scale, background color, CORS-proxied cross-origin images, and element exclusion
• TypeScript type definitions bundled with the package
• A UMD/ESM/CJS build so it can be dropped in via script tag or imported in bundler-based projects

Common Use Cases

• Adding a “download this as an image” or “share as image” button to a web app
• Generating client-side PDF exports by rendering a DOM section to canvas and feeding it into jsPDF
• Capturing visual snapshots of dashboards, invoices, or certificates for export without a backend
• Building browser-based screenshot tools for user-generated content or reports

Under The Hood

Architecture - html2canvas has no rendering-engine dependency of any kind; instead it recursively clones the target DOM subtree into an internal tree of ElementContainer nodes (see src/dom/), computes each node’s resolved CSS via getComputedStyle, and hands the resulting tree to a CanvasRenderer (src/render/canvas/) that paints borders, backgrounds, text, and images onto a 2D canvas context in DOM paint order — effectively a from-scratch reimplementation of a browser’s box model and paint pipeline rather than a wrapper around a real screenshot API. Tech Stack - Written in TypeScript, bundled with Rollup into UMD/ESM/CJS outputs (dist/html2canvas.js, .esm.js), with zero runtime dependencies; it targets Promise-capable browsers (IE9+ with a polyfill) and ships its own css/ module for parsing CSS values (color, gradients, transforms, box-shadow) since it cannot rely on the browser to expose these programmatically. Code Quality - The src/ tree is organized by concern (dom/, css/, render/) with a tests/reftests visual-regression suite comparing rendered output against reference screenshots across browsers via Karma/Sauce Labs, plus a tests/__tests__ unit suite; however the README itself flags the project as being in an experimental, slow-maintenance state, and commits_per_month activity data shows very low ongoing development. API Design - The public surface is intentionally minimal: a single html2canvas(element, options) call returning a Promise<HTMLCanvasElement>, which keeps the barrier to entry low, though the options object (proxy, scale, ignoreElements, onclone, etc.) requires reading the docs to discover non-obvious cross-origin and iframe-handling behavior.