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 html2canvas result is blank or cut off, check the capture dimensions first: browsers can silently produce incomplete canvases when their size limits are exceeded. But missing images, unsupported CSS, empty iframes, and running the library in Node.js have different causes. The right fix depends on what is missing.
Identify what is actually missing
Do not treat every blank-looking result as a canvas-size or CORS problem. Compare the output with the page and use the pattern to narrow the cause.
| What the output looks like | Likely cause | First check |
|---|---|---|
| The whole canvas is blank, or the lower/outer portion is cut off | Canvas dimensions exceed a browser or device limit | Compare the element’s scroll dimensions with the capture window size. The html2canvas FAQ says oversized canvases can fail silently. html2canvas FAQ |
| Text and layout appear, but external images are missing | Cross-origin image restrictions or failed image loading | Check the image response’s CORS headers and html2canvas resource diagnostics. FAQ · proxy documentation |
| Some visual effects, styles, or elements differ from the page | The relevant CSS property is unsupported or incompletely implemented | Isolate the affected property or element and compare a simplified capture. supported features |
| An embedded frame is empty | The frame is cross-origin or sandboxed without same-origin access | Check the iframe origin and sandbox attributes. html2canvas documentation |
| The call fails or has no usable browser page when run on a server | html2canvas is a browser-side library, not a Node.js screenshot renderer | Run it in a browser, or use browser automation for server-side rendering. html2canvas FAQ |
Fix blank or cut-off output caused by canvas dimensions
Canvas limits vary by browser, operating system, and device. The html2canvas FAQ warns that a browser may return a blank or partly rendered canvas without throwing an error when a limit is exceeded. Its documented first step for a target element is to set the rendering window to the element’s scroll dimensions:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchconst element = document.querySelector("#capture");
if (!element) {
throw new Error("Could not find #capture");
}
const canvas = await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight,
});
document.body.appendChild(canvas);This is most relevant when an element is taller or wider than the visible browser viewport. It tells html2canvas what window dimensions to use; it does not guarantee that every browser can allocate a canvas of that size. If the result remains blank or truncated, reduce the capture area or divide the content into smaller captures and test again.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
The FAQ gives rough maximum-dimension figures of about 32,767 pixels for Chrome/Chromium, Firefox, and desktop Safari. It also gives approximate maximum canvas areas of 268 megapixels for Chrome/Chromium and 472 megapixels for Firefox. These are rough technical guidance from the project FAQ, which does not state a publication year; they are not guaranteed limits for current versions or all devices. The FAQ says iOS Safari is more constrained and depends on device RAM. See the FAQ’s canvas-limit notes rather than treating any figure as a safe target.
Lowering the scale option or capturing a smaller region can be useful experiments when a canvas is too large, but the FAQ specifically documents setting windowWidth and windowHeight; it does not promise that changing scale will resolve a particular failure. Verify the actual output after each change.
Restore missing cross-origin images
When text renders but an image hosted on another origin does not, the browser’s cross-origin rules are usually central to the diagnosis. With the default allowTaint: false, html2canvas skips images that would taint the canvas. A tainted canvas cannot be read back normally for export, so setting allowTaint: true is not a general fix for a screenshot you need to save.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Use CORS only when the image server allows it
Try useCORS: true if the image server is configured to permit the request. The server must return an appropriate Access-Control-Allow-Origin response header for the requesting page’s origin (or an allowed wildcard where appropriate). The option asks the browser to load the image using CORS; it cannot make a server grant permission or bypass browser policy.
const canvas = await html2canvas(document.querySelector("#capture"), {
useCORS: true,
});Use a proxy when you control a suitable proxy
If the image host does not provide usable CORS headers, a proxy is another documented route. Configure a proxy that can fetch and serve the required image appropriately, then pass its URL through the proxy option. A proxy is not a way to access content you are not authorized to retrieve, and it adds another network hop that can fail or slow the capture. Follow the project’s proxy documentation for the supported setup.
To distinguish a CORS issue from a missing or delayed resource, inspect the browser console and network panel, and use html2canvas’s onError callback, logging, and imageTimeout options. These options help reveal load failures and timing; they do not override access restrictions. The available settings are listed in the configuration reference.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Account for CSS differences
html2canvas does not take a literal photograph of the browser’s final pixels. It traverses DOM elements, reads properties it understands, and constructs a rendering. The result can differ from what the browser visibly displays because each CSS property must be implemented by the library, and the project does not support every CSS property. See the project’s documentation and feature list.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If only one component or effect is wrong, simplify the page or temporarily remove the suspected style to identify which property triggers the mismatch. The html2canvas FAQ recommends making a test case when a property is missing or incomplete. A smaller reproduction can help establish whether the issue is a library limitation rather than a failed screenshot call.
The onclone option lets you adjust the cloned document used for rendering without changing the live page. ignoreElements and the data-html2canvas-ignore attribute can exclude troublesome elements. Those options can help isolate a problem or remove content from the output, but they do not add support for CSS the library has not implemented.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Check iframe origin and sandbox settings
html2canvas can render same-origin iframe contents recursively. It cannot read a cross-origin frame’s document because the browser does not expose that document to the parent page. A sandboxed iframe without allow-same-origin has a similar access limitation. If the blank region matches an iframe, verify its origin and sandbox configuration before changing canvas dimensions or image settings.
Where you control the embedded page, a same-origin arrangement may make its contents accessible, subject to your security requirements. Otherwise, capture the framed page separately with an authorized method, or accept that the parent-page capture cannot reconstruct inaccessible frame contents. Changing html2canvas options cannot override the browser’s origin boundary.
Run html2canvas in a browser, not bare Node.js
html2canvas depends on browser objects such as window, document, and computed styles. It is client-side code; calling it in a plain Node.js process does not provide the browser environment it needs. The project FAQ points to tools such as Puppeteer and Playwright for server-side browser-driven screenshots. If the task is a browser extension capturing a visible tab, the FAQ also points to native extension screenshot APIs, which avoid html2canvas’s canvas-size limitation for that use case.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Choose based on the actual requirement: html2canvas reconstructs accessible DOM content inside a browser page; browser automation launches or controls a browser for server-side capture; an extension API is relevant to extension capture. None of these choices bypasses authorization or browser security restrictions on protected content.
Use diagnostics before changing several settings
- Confirm the target exists. Check that the selector returns the intended element and that it has nonzero dimensions before calling html2canvas.
- Inspect the output shape. A whole blank or truncated canvas points toward size limits; text without images points toward resource loading or CORS; a localized style mismatch points toward CSS support; a blank embedded region points toward iframe access.
- Read browser errors. Inspect the console and network panel for blocked cross-origin requests, failed image URLs, or other loading errors.
- Enable html2canvas diagnostics. Use
logging: trueand anonErrorcallback to record resource failures. SetimageTimeoutdeliberately if image loading time is relevant; do not assume a longer timeout fixes a CORS denial. - Change one variable at a time. Test dimensions, CORS configuration, or a simplified style separately so the result identifies the cause rather than obscuring it.
- Keep a minimal reproduction. If a CSS feature remains wrong, reduce the page to the smallest case that shows the mismatch and compare it with the project’s documented support.
Or skip the browser setup
If you need a screenshot of a public page rather than a DOM reconstruction inside your own app, ScreenshotNeo offers a one-request screenshot API. It returns a PNG, JPEG, WebP, or PDF, and its capture can remove cookie/consent banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are not billed; an MCP server lets AI agents use screenshot tools. It includes 1,000 screenshots per month free with no card, and paid plans start at $5 for 3,000.
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. ScreenshotNeo is a website screenshot API and MCP server; it is an alternative when you need browser-rendered page capture rather than html2canvas’s in-page DOM reconstruction. Sign up for 1,000 free screenshots each month with no card.
What html2canvas can and cannot promise
A blank html2canvas result is not one single failure mode. Match the remedy to the symptom: set appropriate window dimensions for large captures, resolve CORS or proxy access for images, account for unsupported CSS, check iframe access, and use a browser runtime. Even when the call succeeds, html2canvas reconstructs content rather than copying every rendered browser pixel, so exact visual parity is not guaranteed.
Frequently Asked Questions
Does useCORS: true bypass an image host’s restrictions?
No. The image server must allow the cross-origin request with a suitable response header; the option cannot override browser security.
Why does html2canvas show text but not images?
The image requests may have failed or been blocked by cross-origin rules. Check the browser network and console diagnostics, then verify server CORS or configure an appropriate proxy.
Can I use html2canvas directly in Node.js?
Not as a bare Node.js renderer. It depends on browser APIs; use it in a browser or use browser automation for server-side capture.
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.
