html2canvas — Render Web Pages to Canvas Screenshots in the Browser

Introduction

html2canvas is a JavaScript library that captures screenshots of web pages or specific DOM elements entirely in the browser. Instead of taking an actual screenshot, it reads the DOM structure and CSS styles, then reconstructs the visual output on an HTML5 Canvas. This makes it useful for generating images, PDF exports, and visual feedback features without any server-side dependencies.

What html2canvas Does

• Renders any DOM element or the full page to an HTML5 Canvas for export as an image
• Parses computed CSS styles including gradients, borders, shadows, and transforms
• Supports cross-origin images when a proxy is configured or CORS headers are set
• Handles scrollable content, overflow clipping, and stacking contexts
• Outputs Canvas objects that can be converted to PNG, JPEG, or passed to PDF libraries

Architecture Overview

html2canvas works by traversing the DOM tree of the target element, reading computed styles via getComputedStyle, and painting each element onto a Canvas 2D context. It builds its own rendering pipeline that interprets CSS properties like background, border-radius, box-shadow, transform, and clip-path. Foreign resources like images are fetched and drawn onto the canvas, subject to CORS restrictions.

Self-Hosting & Configuration

• Install via npm or include the UMD bundle from a CDN in your HTML
• Call html2canvas(element, options) where options control scale, background color, and logging
• Set useCORS: true to attempt loading cross-origin images with CORS headers
• Configure a proxy endpoint with the proxy option for images that lack CORS support
• Adjust scale to control output resolution relative to the device pixel ratio

Key Features

• Pure client-side rendering with no server or browser extension required
• Configurable output scale for high-DPI or retina-quality screenshots
• Selective rendering via element targeting instead of capturing the full page
• Compatible with modern CSS including flexbox, grid, gradients, and web fonts
• Works with libraries like jsPDF to generate PDF exports from rendered canvases

Comparison with Similar Tools

• Puppeteer/Playwright — Server-side headless browser; html2canvas runs entirely in the client
• dom-to-image — Similar approach but less actively maintained and fewer CSS features supported
• html-to-image — Fork of dom-to-image with SVG serialization; html2canvas uses Canvas 2D directly
• Chrome DevTools screenshot — Manual capture; html2canvas enables programmatic in-app screenshots
• Server-side rendering (wkhtmltoimage) — Requires a server; html2canvas works in the browser

FAQ

Q: Does html2canvas capture the actual screen pixels? A: No. It reads the DOM and CSS, then redraws everything on a Canvas. Some CSS features like advanced filters or pseudo-elements may render differently.

Q: Can I capture a specific element instead of the whole page? A: Yes. Pass any DOM element as the first argument and only that element's subtree is rendered.

Q: Why are some images blank or missing? A: Cross-origin images are blocked by Canvas taint rules. Set useCORS: true or configure a proxy to load them.

Q: Can I use html2canvas to generate PDFs? A: html2canvas produces a Canvas. Combine it with jsPDF or pdf-lib to convert the canvas output into a PDF document.

Sources

• https://github.com/niklasvh/html2canvas
• https://html2canvas.hertzen.com/