Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If an HTML-to-image result is missing pictures, differs from the live page, comes out blank, or gets cut off, first identify how it was rendered. html2canvas rebuilds an image from the DOM; it does not take a native screenshot. Its CSS support is necessarily incomplete, and browser security rules still apply to cross-origin images and frames. Check rendering support, resource access, page readiness, capture dimensions, and canvas limits—in that order—before changing code at random.
Start by identifying the rendering method
The right fix depends on whether the conversion runs in a browser with html2canvas or in a real browser controlled by an automation tool. The html2canvas getting-started guide says the library depends on browser APIs and is not suitable for direct use in Node.js. The getting-started guide explains the browser context requirement.
html2canvas traverses the DOM and builds a canvas representation from information available on the page. It does not capture the browser’s pixels. As the project documentation puts it, the result “may not be 100% accurate to the real representation” because it is built from page information rather than an actual screenshot.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
That distinction matters: if a CSS effect or browser feature is not implemented by html2canvas, changing the output width or enabling CORS will not make it appear. The FAQ notes that every CSS property must be implemented individually, so the library will not have full CSS support. First determine whether the issue is a supported feature rendering incorrectly or a feature the renderer does not implement.
#1 Best Overall
Why aren’t my images rendered?
Check whether the image loads in the page
Open the image URL directly or inspect it in the browser’s network tools. Confirm that the request succeeds and that the image has finished loading before capture. An image that never loads, loads late, or returns an error cannot be expected to appear in the converted result.
Check cross-origin access and CORS
If the image is hosted on a different origin, the browser’s same-origin security rules can prevent its pixels from being read into an exportable canvas. html2canvas offers useCORS: true when the image server permits cross-origin access, and a proxy option as another route. The remote server must cooperate with an appropriate CORS response header for the CORS approach to work; a library setting cannot override browser policy.
html2canvas(document.querySelector("#capture"), {
useCORS: true,
imageTimeout: 15000
}).then(canvas => {
document.body.appendChild(canvas);
});The timeout shown here is an example value, not a universal requirement. Set it to fit the resource and application behavior you expect. See the configuration reference for useCORS, proxy, and imageTimeout.
Free tools Windows power users keep installed
One-click scans. No signup required.
Understand tainted canvases
Drawing a cross-origin image without an acceptable CORS path can taint the canvas. That can prevent ordinary export or reading pixel data. allowTaint is not a way to make tainted content readable: allowing it to be drawn does not remove the browser’s export restrictions. Fix the image server’s CORS response or use an appropriate proxy rather than relying on allowTaint.
Rank #2
Why is an iframe missing?
Same-origin iframe content is documented as recursively renderable. A cross-origin iframe is different: browser security prevents the parent page from inspecting its document, so html2canvas cannot reconstruct it from the parent’s DOM. A sandboxed frame without allow-same-origin has a related access limitation. Verify the frame’s origin and sandbox attributes before investigating capture dimensions. The distinction is described in the html2canvas documentation.
Wait for fonts, images, and app content
A capture can run before asynchronous page content is ready. Ensure your application has loaded the content it intends to capture—including images and fonts—before invoking html2canvas. There is no single universal readiness option that can infer every application’s state; use the app’s own loading signals where possible.
The configuration reference documents onError for failed resources, along with imageTimeout, useCORS, and proxy. Use the error callback to surface failures instead of treating every missing asset as a drawing bug.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemshtml2canvas(document.querySelector("#capture"), {
onError: error => console.error("Resource failed during capture:", error),
imageTimeout: 15000,
useCORS: true
}).then(canvas => {
document.body.appendChild(canvas);
}).catch(error => {
console.error("Capture failed:", error);
});Confirm the callback signature and available options against the version of html2canvas installed in your project; the linked configuration reference describes the documented controls.
Fix wrong crops, blurry output, or viewport-dependent layout
html2canvas exposes separate controls for the capture rectangle, browser-like viewport, and output scale. The options reference lists x, y, width, height, windowWidth, windowHeight, and scale. These are not interchangeable:
xandyset the capture area’s origin.widthandheightcontrol the capture dimensions.windowWidthandwindowHeightaffect the viewport used for rendering; changing them can trigger different media-query layouts.scalechanges the output resolution. A larger scale can make the result sharper, but also increases canvas dimensions and memory demand.
For a sharper result on a high-density display, the project’s examples show using window.devicePixelRatio as the scale. Treat that as a resolution choice, not as a fix for incorrect CSS or missing cross-origin content.
const element = document.querySelector("#capture");
html2canvas(element, {
x: 0,
y: 0,
width: element.scrollWidth,
height: element.scrollHeight,
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight,
scale: window.devicePixelRatio
}).then(canvas => {
document.body.appendChild(canvas);
});Use the element’s actual dimensions only when they match the intended output. If you want a viewport screenshot rather than a whole element, use the viewport dimensions instead. Check the configuration reference for the behavior of each option.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Why is the canvas blank or cut off halfway through?
Browsers and platforms impose canvas size limits. The limits vary, and exceeding them can result in blank or partially rendered output without a clear exception. The html2canvas FAQ suggests matching windowWidth and windowHeight to the target element’s scrollWidth and scrollHeight in relevant cases. That can help align the render viewport with a tall element, but it does not eliminate browser canvas limits.
Large captures become more demanding as both their dimensions and scale grow. If a full-page capture fails, try a smaller capture area or a lower scale, then compare the result. For very long pages, capture sections separately and combine them only if your workflow can preserve correct ordering and alignment. Treat any published canvas dimensions as environment-dependent guidance, not a guaranteed safe threshold; the FAQ explicitly notes variation by browser and platform.
Use this symptom-to-check order
| Symptom | Check first | Likely direction |
|---|---|---|
| Remote image is absent | Does the URL load? Is it cross-origin? Does its server send an appropriate CORS header? | Wait for the image, configure useCORS with server permission, or use a proxy. |
| Export fails or canvas cannot be read | Was cross-origin content drawn without a valid CORS path? | Resolve the tainted-canvas cause; allowTaint does not make export readable. |
| CSS differs from the live page | Is the relevant CSS property implemented by html2canvas? | Check library support; dimensions and CORS will not add unsupported rendering features. |
| Iframe content is missing | Is the frame cross-origin or sandboxed without allow-same-origin? |
Parent-page DOM reconstruction cannot inspect inaccessible frame documents. |
| Output is blank or clipped | Capture dimensions, scroll dimensions, viewport, and browser canvas limits. | Reduce the capture size or scale; align viewport dimensions with the content where appropriate. |
| Image is blurry or crop is wrong | scale, x, y, width, height, and viewport options. |
Separate resolution choices from capture-area and responsive-layout choices. |
| Resources appear intermittently | Application readiness, resource failures, timeouts, and CORS/proxy behavior. | Wait for app-specific readiness and expose resource errors. |
When to switch to a real-browser screenshot
If you need a faithful rendering of browser CSS, or need to generate screenshots on a server, use a real browser rather than expecting DOM reconstruction to reproduce everything. The html2canvas FAQ names Puppeteer and Playwright as server-side screenshot alternatives. A real-browser workflow changes the rendering approach; it does not automatically solve deployment issues. Browser installation, fonts, and host environment still need to be configured, and the Puppeteer troubleshooting guide covers issues such as missing local browsers and cache configuration.
Choose based on the constraint
- Use html2canvas when client-side DOM reconstruction is acceptable and its supported rendering features meet your needs.
- Use browser automation when you need a real browser to render the page or need server-side capture, and can maintain its runtime and deployment environment.
- Resolve resource policy first if the missing content is cross-origin. Switching tools does not grant permission to access protected resources.
The collected official material does not establish a current feature-by-feature or cost comparison between Puppeteer and Playwright. Choose between them based on your application, runtime, and operational requirements rather than assuming one is universally better.
Or skip the browser setup
For a hosted screenshot API, ScreenshotNeo returns a screenshot or PDF from one GET request. Its clean-shot steps accept cookie and consent banners like a visitor and remove 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses include X-Page-Verdict and X-Billed headers. It also has an MCP server for AI agents using Claude, Cursor, or another MCP client.
Example cURL request (replace the example target URL if needed):
Best Value
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 options. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Every feature is on every plan. Sign up for 1,000 free screenshots a month, with no card required.
Frequently asked questions
Can I run html2canvas directly in Node.js?
No. The project’s getting-started guide says it depends on browser APIs and is not suitable for direct Node.js use. Use it in a browser, or choose a real-browser server-side approach.
Does useCORS: true bypass a remote server’s restrictions?
No. It requests the CORS path, but the remote server must permit access with an appropriate response header. Browser security policy still applies.
Will Puppeteer or Playwright fix every screenshot problem?
No. A real browser addresses the difference between DOM reconstruction and browser rendering, but runtime setup, browser availability, fonts, and access restrictions still require attention.
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.
