What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use windowWidth and windowHeight in the html2canvas() options object when you need the page to render as if it were viewed through a different viewport. Those settings can change responsive media-query results. They do not, however, determine the bitmap’s final dimensions: use width, height, x, y, and scale for canvas size, cropping, and pixel density.
The direct solution
Pass the desired viewport-like dimensions when calling html2canvas:
const element = document.querySelector('#report');
const canvas = await html2canvas(element, {
windowWidth: 1200,
windowHeight: 900
});
document.body.appendChild(canvas);windowWidth and windowHeight control the window dimensions used while html2canvas clones and renders the element. A layout with a breakpoint at 992 pixels, for example, can render its desktop rules when windowWidth is 1200 and its tablet rules when it is 768.
This is different from enlarging the output image. A larger bitmap that keeps the same responsive layout requires scale, not a larger render window. A crop requires x, y, width, and height.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Choose the setting for the result you actually want
| Goal | Use | What it changes |
|---|---|---|
| Reproduce a desktop, tablet, or mobile breakpoint | windowWidth, windowHeight |
The viewport-like dimensions used for layout and media queries |
| Set the bitmap’s output dimensions | width, height |
The canvas region to render |
| Move the captured region | x, y |
The crop origin within the rendered document |
| Increase sharpness or pixel density | scale |
Raster resolution without selecting a different responsive breakpoint |
| Capture all of a tall element | windowWidth: element.scrollWidth, windowHeight: element.scrollHeight |
A render window matching the element’s scrollable dimensions |
Responsive layout example
const canvas = await html2canvas(document.querySelector('.dashboard'), {
windowWidth: 375,
windowHeight: 812,
scale: 2
});The layout is evaluated at 375 by 812 CSS pixels, while scale: 2 creates a denser raster. The resulting canvas is not necessarily 375 by 812 pixels because the element’s rendered dimensions and html2canvas’s other sizing options still matter.
Large output without changing breakpoints
const canvas = await html2canvas(element, {
windowWidth: 1024,
windowHeight: 768,
scale: 3
});Keep the render window at 1024 by 768 and raise the scale when the goal is a sharper image for a retina display or print workflow. Raising windowWidth instead could activate different CSS rules and produce a different composition.
Capture a complete element instead of a clipped viewport
If a long element is clipped or the canvas is unexpectedly empty, the html2canvas FAQ’s recommended pattern is to use its scroll dimensions as the render window:
const element = document.querySelector('#invoice');
const canvas = await html2canvas(element, {
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
});This is useful for cards, reports, and pages whose content extends beyond the visible browser window. It is not a guarantee that an arbitrarily large page will fit into one canvas. Canvas capacity depends on the browser, operating system, graphics hardware, and available memory.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
When explicit canvas dimensions are also needed
Use width and height when you need a precise output region. For example:
const canvas = await html2canvas(element, {
windowWidth: 1200,
windowHeight: 1200,
x: 0,
y: 0,
width: 1200,
height: 800,
scale: 2
});Here the render window is 1200 by 1200, but the captured region is 1200 by 800 starting at the element’s top-left coordinates. Test the crop against the element’s actual bounding box; fixed headers, transforms, and nested scrolling containers can shift the visible result.
A reusable browser implementation
Wait until the target content exists, select it, render it, and export the canvas in the format your application needs:
async function renderAtViewport(selector, viewport, options = {}) {
const element = document.querySelector(selector);
if (!element) {
throw new Error(`No element matches ${selector}`);
}
await document.fonts?.ready;
const canvas = await html2canvas(element, {
windowWidth: viewport.width,
windowHeight: viewport.height,
...options
});
return canvas;
}
const canvas = await renderAtViewport('#profile', {
width: 1440,
height: 900
}, {
scale: window.devicePixelRatio,
backgroundColor: '#ffffff'
});
const imageUrl = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = imageUrl;
link.download = 'profile.png';
link.click();Set the viewport values explicitly rather than relying on the current browser size when reproducibility matters. Waiting for fonts avoids capturing fallback glyphs, although images and application data may require their own readiness checks.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows 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 reinstallRank #3
Responsive breakpoints, CSS, and cloned content
html2canvas does not ask the browser for a native screenshot. It walks the DOM and constructs an image from the information and CSS it can interpret. Consequently, changing the render window can change media-query styles, but unsupported CSS can still differ from what a browser displays on screen. The project notes that full CSS support is impossible because every CSS property must be implemented manually.
Make breakpoint behavior deterministic
- Set both
windowWidthandwindowHeight; do not set only width when vertical media queries or viewport-height logic matter. - Use the same CSS loaded by the page at capture time. Missing stylesheets or late-loaded fonts can make a correctly sized render look wrong.
- Use
onclonewhen a temporary class, inline style, or hidden state must exist only in the cloned document. - Use a deliberate
scaleinstead of expecting viewport dimensions to control sharpness.
Cross-origin images
For images hosted on another origin, try useCORS: true:
const canvas = await html2canvas(element, {
windowWidth: 1280,
windowHeight: 800,
useCORS: true
});This works only when the image server permits cross-origin access with appropriate headers. If it does not, the image may be omitted or the canvas may become tainted, preventing export. Proxying the asset through an origin you control is an alternative when your security and licensing policies allow it.
Troubleshooting wrong size, blank output, and missing content
“The mobile layout still looks desktop”
Confirm that windowWidth is below the breakpoint you intend to test and that the element’s CSS actually uses media queries based on viewport width. Do not substitute width for windowWidth; canvas dimensions do not select responsive rules.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →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
“The image is sharp but the layout changed”
You probably increased windowWidth when you needed scale. Restore the intended render window and raise scale independently.
“The bottom of the page is missing”
Capture the element rather than a short viewport and try element.scrollHeight for windowHeight. Check nested scroll containers: an inner element with overflow: auto may have a scroll height that differs from the page’s document height.
“The canvas is blank or the call fails on a very large page”
Reduce the capture area, lower scale, or split the document into sections. Browser canvas limits vary by browser, platform, and hardware, so no single maximum is a universal guarantee. Also check memory pressure and unusually large decoded images.
“Some CSS effects, SVG, video, or filters are wrong”
That is a limitation of DOM reconstruction, not necessarily a viewport error. Replace unsupported effects with simpler CSS for the capture, provide a static poster for video, or use a native browser screenshot workflow when pixel fidelity is required.
Recommended Free Tools
“Images from a CDN disappear”
Verify that the CDN sends a permissive cross-origin response and that useCORS: true is enabled. Credentials, redirects, and restrictive response headers can still prevent access.
“The server cannot run this code”
html2canvas is client-side and depends on browser APIs. For server-side screenshot generation, its documentation points developers toward browser automation tools such as Puppeteer or Playwright rather than running html2canvas in a bare Node.js process.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and reliability practices
- Capture only the needed element instead of the entire document.
- Keep
scaleas low as your delivery target permits; memory use grows with the number of output pixels. - Wait for fonts, images, and asynchronous data before rendering.
- Prefer one moderate capture over an enormous canvas, then stitch or paginate when the document is exceptionally tall.
- Remove animations or freeze them in the clone so the result is deterministic.
- Test each target browser and device class; canvas limits and CSS implementation details differ.
Or skip the browser setup
For a server-side screenshot, ScreenshotNeo accepts one GET request and returns PNG, JPEG, WebP, or PDF. Its capture options include viewport and device controls, full-page capture with lazy images loaded, element selection, dark mode, retina scale, custom CSS and JavaScript, waits for selectors, delays or network idle, cookies and headers, geolocation, timezone, blocking rules, resizing, caching, signed links, asynchronous jobs, bulk capture, and PDF settings.
Use the API documentation at https://screenshotneo.com/docs/ for the complete parameter list. A basic request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status. Its MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots each month without a card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Which approach should you use?
| Requirement | Best fit |
|---|---|
| Capture an element already displayed in your web app | html2canvas with windowWidth and windowHeight |
| Test responsive breakpoints in the browser | html2canvas with explicit render-window dimensions |
| Generate screenshots on a server or CI worker | A browser-based service such as ScreenshotNeo or a configured automation browser |
| Need a native, pixel-faithful browser image | Browser automation or a screenshot API rather than DOM reconstruction |
Frequently Asked Questions
Can I set only windowWidth?
Yes, but set windowHeight as well when height-based media queries, viewport units, or vertical clipping affect the design. Explicitly setting both makes captures more reproducible.
Does windowWidth change the canvas element’s CSS width?
Not by itself. It changes the render window used by html2canvas. Use width and height for the captured canvas region, and scale for raster density.
Why does html2canvas differ from a browser screenshot at the same viewport?
html2canvas reconstructs an image from DOM and supported CSS rather than capturing browser pixels. Unsupported CSS, cross-origin assets, fonts, and canvas limits can produce differences.
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 problemsQuick 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.
