Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsIf an element’s CSS background image appears in the browser but disappears from an html2canvas export, first confirm the image URL loads, then check cross-origin access and whether your installed html2canvas version supports the CSS being rendered. The name “5.0” is ambiguous: a 2020 Stack Overflow question with this title refers to v0.5.0-beta4, and the available evidence does not establish a current html2canvas 5.0 release. Check your actual dependency before using version-specific examples.
First, identify what “html2canvas 5.0” means in your project
Do not choose a fix based only on the number in an old question or snippet. The historical question titled “HTML2Canvas 5.0 Not saving Background Image” links to v0.5.0-beta4; that is not evidence of a modern 5.0 release. Check the version your project actually loads, then consult documentation that matches it. The Stack Overflow question is useful for interpreting the old wording, not as authoritative release history: the 2020 question.
- For an npm project, run
npm ls html2canvasin the project directory and note the installed version. - If the library comes from a script tag, inspect the script URL in your HTML or the browser’s Network panel.
- If you have more than one copy loaded through a bundle or dependency, confirm which one the page actually uses.
The examples below use the documented promise-based pattern and current configuration names. Confirm they are available in your installed version; do not assume an old beta has the same API or behavior. The configuration reference is on the project’s mutable master branch, so it may not describe an older release exactly: html2canvas configuration.
Find out whether the browser can load the background
html2canvas builds an image from DOM and CSS information; it does not take a native screenshot of the browser’s final pixels. So start with the page itself, not with export options. The project describes this rendering model in its About documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- Open DevTools and select the element that should have the background.
- In the computed styles, inspect
background-image. Confirm it contains the expected URL rather thannone, and note the resolved URL. - Open that resolved URL directly in a new tab. In DevTools’ Network panel, check whether the request succeeds and whether it redirects, requires authentication, or returns an error.
- Compare the resolved URL with the asset’s actual location. A relative URL is resolved against the stylesheet or document context in which it is declared; a different build directory or base path can make a formerly valid path point somewhere else.
If the browser cannot load the asset, html2canvas cannot render it. Fix the CSS URL, build output, server response, or access requirement first. A CORS option cannot repair a missing file, an incorrect path, or a failed request.
Wait for backgrounds that load or change asynchronously
If application code sets or replaces the background after initial page load, call html2canvas only after that work is complete. For example, if your own code controls the timing, wait for the relevant application event or for the image to load before starting the capture. A fixed delay can help diagnose a race, but it is not a reliable substitute for knowing that the asset is ready.
The documented configuration has an imageTimeout default of 15000 milliseconds. Setting it to 0 disables that timeout; it does not make an inaccessible URL, unsupported CSS, or a server that never responds work. Check the option against your installed version in the configuration reference.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Separate a CORS problem from a rendering problem
A background from another origin can load visibly in a browser while still being unavailable to canvas rendering. Browser security policy applies: html2canvas does not bypass it. The project FAQ recommends useCORS: true when the remote server allows the request with a suitable Access-Control-Allow-Origin response header, or a proxy that serves the image through your own origin. See the html2canvas FAQ.
Try a same-origin copy or a data URI as a diagnostic. If that renders while the remote background does not, cross-origin access is a likely cause. If the same-origin version is also missing, investigate loading time or CSS support instead. A data URI is most useful for a small test asset; it is not a general replacement for a correctly served production image.
| Remedy | Cause it addresses | What it requires | Security and version considerations |
|---|---|---|---|
useCORS: true |
A remote image that the browser can request with cross-origin permission. | The image host must return an appropriate Access-Control-Allow-Origin header. |
It does not override browser policy or grant permission the server has not given. Confirm the option exists in your installed version. |
| Controlled same-origin proxy | A remote asset whose host does not grant the needed CORS access. | A proxy endpoint on your origin that fetches and serves permitted assets. | Restrict which destinations it can fetch and validate requests; an unrestricted proxy can expose your server to abuse. The project FAQ recommends a proxy as an alternative. |
| Simpler CSS or fallback asset | A CSS rendering gap after the image itself is known to load. | A CSS form supported by your installed html2canvas version, or a fallback representation. | This changes the rendered approach rather than relaxing browser security. Support varies by version. |
Check redirects and the final image origin
Do not assume a URL is effectively same-origin just because its starting address is. It may redirect to a CDN or another host, changing the origin involved in the request. The report in open issue #3020, opened January 17, 2023, describes a redirect-related case. It is a user report, not proof that every redirect causes the same failure or that a general fix has been confirmed.
Rank #3
In DevTools, inspect the request and redirect chain, then check the response headers on the final asset response. If that host does not grant the required cross-origin access, use a permitted same-origin proxy or arrange appropriate headers with the asset host.
Test whether html2canvas supports the CSS that produces the image
If the browser loads the image and cross-origin access is not the issue, strip the case down to a plain element with a simple background-image. Remove unrelated styles and application behavior until you can tell whether the basic background renders. Then add the original styles back in stages.
Recommended Free Tools
This matters because html2canvas implements CSS properties itself; it does not simply preserve every browser-rendered effect. Its FAQ says, “Every CSS property must be manually implemented to render correctly, so html2canvas will never have full CSS support.” Attribute that statement to the html2canvas project FAQ, which also recommends creating a test case for a genuinely missing or incomplete property.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
- If a plain background renders but the original does not, identify which added style or combination triggers the difference.
- If the background still fails in a minimal same-origin case, check whether the property is implemented in your installed version and consider simplifying the CSS or providing a fallback.
- Do not treat an issue report as proof of a universal defect. For example, open issue #3237, opened March 20, 2025, is a report about a particular case, not a general compatibility guarantee.
Use a minimal capture to inspect loading and cloning
Once the image loads in the page, use a small capture to separate basic library setup from application complexity. This example assumes the documented promise-based API is available in your installed version and that the page has an element with the selector #capture:
import html2canvas from 'html2canvas';
const element = document.querySelector('#capture');
if (!element) throw new Error('Could not find #capture');
const canvas = await html2canvas(element, {
useCORS: true,
logging: true
});
document.body.appendChild(canvas);useCORS helps only when the image server grants access. The documented defaults are useCORS: false, proxy: null, and imageTimeout: 15000 milliseconds. Turn on logging while diagnosing, then use the console output to see where rendering proceeds or fails. The onclone hook can inspect or adjust html2canvas’s cloned document without changing the source page; check its availability and signature for your installed version before relying on it.
With a controlled proxy, the configuration can instead include proxy: '/your-image-proxy', but that endpoint must implement the expected proxy behavior for your version. Do not point it at an arbitrary third-party service or expose a server-side fetch endpoint without destination controls.
Troubleshoot by symptom
background-imageisnone. The style was not applied or was overridden. Check computed styles, stylesheet loading, selector specificity, and whether the class or inline style exists at capture time.- The asset URL returns 404 or another failure. Correct the path, deployment output, authentication, or server response. Verify the built page’s resolved URL rather than relying on a development path.
- The asset loads in the tab, but not in the canvas. Check the response’s CORS headers and final redirected origin. Try
useCORS: truewith server permission, or use a controlled same-origin proxy. - The image appears only after the export starts. Wait for the background-setting code and image request to finish before calling html2canvas. Increasing
imageTimeoutmay help only if a legitimate request is still in progress. - A plain test works but the production element does not. Add styles and behavior back incrementally to isolate a CSS feature, dynamic change, or interaction that the renderer handles differently.
- An old snippet rejects the options or behaves differently. Check the actual loaded version and use its matching configuration reference. Do not apply current option names to
v0.5.0-beta4without verifying compatibility. - The URL begins on your site but the request fails cross-origin. Inspect redirects and headers on the final response, not just the first URL.
Or skip the browser setup
If you need a screenshot of a live webpage rather than a canvas export of a selected element in your application, ScreenshotNeo offers a website screenshot API. It is a different approach from html2canvas: one request captures a page as PNG, JPEG, WebP, or PDF, rather than rendering a DOM element inside your app. For a simple capture, use cURL (replace the URL with a page you are authorized to capture):
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 setup and options. It accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, with the result identified by response headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month, with no card required.
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.
