Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To download an html2canvas capture without showing a separate save dialog, turn the resolved canvas into a PNG data URL, put it on a temporary download link, and click that link. The code below captures an element with the ID capture; change the selector and filename to suit your page.
Automatically download an html2canvas capture
html2canvas renders a DOM element into a canvas asynchronously. Start the download only after its Promise resolves:
html2canvas(document.querySelector('#capture')).then(canvas => {
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = canvas.toDataURL('image/png');
link.click();
});Load html2canvas on the page before running this code, and make sure an element matching #capture exists. The official example uses document.body as its target; selecting a specific element keeps the output focused. The download property supplies the suggested filename. A browser may apply its own download behavior or restrictions, so test this in the browsers your application supports.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use async/await when it fits your code
The same sequence can be written with await inside an async function:
async function downloadCapture() {
const element = document.querySelector('#capture');
if (!element) throw new Error('Capture target #capture was not found');
const canvas = await html2canvas(element);
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
downloadCapture().catch(error => {
console.error('Could not create screenshot:', error);
});Calling the function from a button click is a useful pattern: it makes the user action explicit and gives your application a place to show progress or report an error. The capture still runs asynchronously; the export must remain after the awaited result.
Choose a supported output format
The example requests PNG with toDataURL('image/png'). If your application needs JPEG or WebP, the canvas API can request those formats, subject to browser support. Update the filename extension to match the chosen format and verify the actual output in target browsers.
What html2canvas captures—and what it does not
html2canvas describes its purpose as taking “screenshots” of webpages or parts of them directly in the user’s browser. That wording does not mean it records the browser’s rendered pixels. It reconstructs an image from DOM and style information, implementing supported rendering features. Unsupported CSS or browser behaviors can therefore look different from the live page. See the html2canvas documentation for the rendering model and limitations.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use it when the desired result is an in-page rendering of content you control and can test. If pixel-level fidelity to a browser window is essential, a native browser capture mechanism may be a better fit. Cross-origin frames are also constrained: a page cannot freely inspect another origin’s iframe, while same-origin iframe handling is a separate case.
Configure element size, scale, and rendering
Pass an options object as the second argument to html2canvas(element, options). The current project option reference documents available settings and version-specific details: html2canvas configuration.
Scale and output dimensions
The scale option controls the scale at which the element is rendered; its default is the device pixel ratio. A higher scale can produce a denser image, but increases pixel count and memory use. It does not fix unsupported CSS or make a DOM reconstruction identical to a native screenshot.
const canvas = await html2canvas(element, {
scale: 1
});For long or specially sized content, windowWidth and windowHeight influence the rendering viewport and media-query evaluation. The element’s visible size and its scroll dimensions may differ, so decide whether the capture should represent the current viewport or the full content, then test the result at that size.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsCross-origin images
Images loaded from another origin can prevent the resulting canvas from being read or exported unless browser security rules allow it. The useCORS option asks html2canvas to attempt CORS-enabled image loading. It does not override browser policy: the image server must grant suitable access. An appropriately configured proxy is another documented route where suitable for your application.
const canvas = await html2canvas(element, {
useCORS: true
});Only enable this after confirming the image server’s CORS behavior. html2canvas states that it cannot circumvent browser content policy restrictions; see Getting Started and the proxy documentation.
Other useful options
proxy: configure a proxy route for resources that need to be fetched through one, subject to the proxy and remote server’s rules.windowWidthandwindowHeight: set the rendering window dimensions, including for layouts affected by media queries.scale: choose render scale, balancing image density against memory and canvas size.
Check the configuration reference for exact option names and behavior in the version installed by your project. Do not treat options as a way to bypass cross-origin permissions.
Large pages, full-height elements, and canvas limits
Browser and platform canvas dimension and total-area limits vary. An oversized canvas may be blank, incomplete, or truncated without a helpful error. There is no single safe maximum that applies to all browsers and devices, so test your actual target dimensions and environments instead of relying on a universal pixel limit.
Recommended Free Tools
For a long element, configure the rendering window dimensions to correspond to the element’s scroll dimensions where appropriate, then inspect the resulting canvas before offering it as a download. A high scale multiplies the output dimensions and can turn an otherwise workable capture into an excessively large canvas. If a capture is clipped, reduce scale or capture smaller sections and compose them only if your layout and application can reliably handle that.
Troubleshoot missing, blank, or inaccurate output
The click happens but no usable file is saved
- Confirm html2canvas completed and the click occurs in the Promise resolution or after
await. - Check the browser console for errors from capture or
toDataURL(). - Verify that the target selector matched an element and that the produced canvas has non-zero dimensions.
- Test the download behavior in the browsers and contexts where the page will run.
Remote images are missing or export fails
Inspect the image server’s CORS headers. Use useCORS: true only when the remote server grants the required access, or configure an appropriate proxy. The option cannot grant permission by itself. The official guide explains this restriction at html2canvas Getting Started.
The result does not match the page
First distinguish a reconstruction mismatch from a capture bug. html2canvas does not take a literal screenshot of browser pixels and does not support every CSS feature. Check the documentation’s supported features, simplify or adjust the target styling if practical, and compare the output in the relevant browser.
The output is blank, clipped, or incomplete
Suspect canvas size or total pixel-area limits when large captures fail inconsistently across devices. Reduce the captured area or scale, set suitable windowWidth and windowHeight, and test the longest realistic page. Browser-specific limits are not stable universal guarantees.
Content inside an iframe is absent
A cross-origin iframe’s document is protected by browser security restrictions. html2canvas cannot render content it cannot inspect. Same-origin frames are a distinct scenario; for cross-origin content, use a capture approach with legitimate access to the target page rather than trying to bypass the browser boundary.
Choose the right capture approach
For an ordinary webpage where you control the DOM and want a client-side image, html2canvas plus a download link is a direct solution. Consider another method when the environment or fidelity requirement changes:
- Browser extension: use the browser’s native extension screenshot APIs when building an extension that needs browser capture capabilities.
- Server-side screenshot: the html2canvas FAQ points to Puppeteer or Playwright for server-side screenshot generation.
- Pixel-faithful browser image: prefer a native browser capture route when a DOM reconstruction’s CSS support is insufficient.
- Protected remote assets or frames: resolve access and CORS permissions legitimately; neither html2canvas nor a client-side option can bypass browser security policy.
html2canvas runs in a browser and is not suitable for Node.js. Its FAQ discusses these alternatives and canvas limits at html2canvas FAQ.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot of a public webpage rather than a canvas export inside your own app, ScreenshotNeo offers a screenshot API and MCP server. A single request can return an image or PDF; it is a different workflow from html2canvas, which renders a DOM element in the page.
Example cURL request (replace the target URL and API key):
Best Value
![DeskFX Free Audio Effects & Audio Enhancer Software [PC Download]](https://m.media-amazon.com/images/I/41fXbDohyuS._SL160_.jpg)
- Transform audio playing via your speakers and headphones
- Improve sound quality by adjusting it with effects
- Take control over the sound playing through audio hardware
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request parameters and response details.
- Cookie and consent banners are accepted and removed before capture; newsletter popups and chat widgets are removed, with each step configurable.
- Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents and MCP clients. - The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Yearly billing gives two months free, and features are available across plans.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can html2canvas download a JPEG instead of PNG?
Yes. Request a supported canvas image format with `toDataURL()` and use a matching filename extension; verify format support in target browsers.
Can I use html2canvas in Node.js?
No. html2canvas runs in a browser. For server-side screenshots, its FAQ identifies Puppeteer or Playwright as alternatives.
Does `useCORS: true` bypass cross-origin restrictions?
No. It can attempt CORS-enabled loading, but the remote server must grant suitable access.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
