If an image exported with html2canvas has a horizontal line, first find out where the line enters the pipeline: in the original page, in the canvas returned by html2canvas, or only after that canvas is encoded and displayed as an image. toDataURL() exports the canvas contents; it is not, by itself, a universal explanation or fix for a line. The distinction determines what to inspect next.
Find the stage where the line appears
html2canvas reconstructs an image from DOM and CSS information; it does not simply ask the browser for a native screenshot. It can render only the CSS it understands, so the result may differ from the page as the browser displays it. Diagnose the capture and export as separate stages rather than changing random CSS or repeatedly adjusting scale.
- Look at the affected page in the browser at the size and state you intend to capture. Note whether the line is already visible.
- Inspect the canvas returned by
html2canvasbefore callingtoDataURL(). If the line is in that canvas, investigate the DOM, CSS, layout, or capture configuration. - Decode the data URL and inspect the resulting image at its intrinsic pixel dimensions. If the canvas looks clean but the decoded image does not, investigate encoding, image display, and any resizing or scaling performed after export.
- Record the dimensions and capture settings so you can compare one change at a time.
The browser preview, canvas bitmap, and displayed image are different checkpoints. An image element can be displayed at dimensions that differ from the bitmap dimensions, and a later layout or image-processing step can introduce an apparent seam. Do not conclude that encoding caused the line merely because you first noticed it in the saved image.
Make a reproducible capture and inspect the canvas
Keep a small test that captures only the affected element. This example logs the browser and device information, records the element’s layout size, creates the canvas, and then exports a PNG data URL. Open the returned canvas in the browser before using the data URL so you can compare the two stages directly.
Outdated 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 matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11#1 Best Overall
async function diagnoseCapture(selector) {
const element = document.querySelector(selector);
if (!element) throw new Error(`No element matches ${selector}`);
const rect = element.getBoundingClientRect();
console.log({
html2canvasVersion: window.html2canvas?.version ?? "check your package lock",
userAgent: navigator.userAgent,
devicePixelRatio: window.devicePixelRatio,
elementCssWidth: rect.width,
elementCssHeight: rect.height
});
const canvas = await html2canvas(element);
console.log({
bitmapWidth: canvas.width,
bitmapHeight: canvas.height,
cssDisplayWidth: canvas.style.width || "not explicitly set",
cssDisplayHeight: canvas.style.height || "not explicitly set"
});
document.body.appendChild(canvas); // Inspect this before encoding.
const dataUrl = canvas.toDataURL("image/png");
const image = new Image();
image.src = dataUrl;
await image.decode();
console.log({ decodedWidth: image.naturalWidth, decodedHeight: image.naturalHeight });
document.body.appendChild(image);
return { canvas, dataUrl, image };
}
diagnoseCapture("#capture-target").catch(console.error);Load the html2canvas library using the installation method already used by your application before running this snippet. The optional version expression above is defensive: if your build does not expose a version property, identify the installed version from your package manager’s lockfile or dependency declaration. Do not infer a version from the browser console.
Appending both outputs is a quick visual check, not a guarantee that the browser presents them at identical CSS sizes. For a careful comparison, inspect the intrinsic bitmap dimensions in the console and save the data URL to a PNG without applying a resize. If the exported image is later drawn onto another canvas, placed in a scaled element, or processed by an image library, test that operation separately.
Check bitmap size, display size, and scale
The canvas has pixel dimensions (canvas.width and canvas.height) and may also have CSS display dimensions. Those are not interchangeable. The documented scale option defaults to window.devicePixelRatio, so a high-density display can yield a bitmap with more pixels than the element’s CSS dimensions suggest.
Rank #2
const canvas = await html2canvas(element, { scale: 1 });
console.log("bitmap pixels", canvas.width, canvas.height);
console.log("element CSS pixels", element.getBoundingClientRect().width,
element.getBoundingClientRect().height);Try a deliberate scale: 1 as a diagnostic comparison, not as a presumed fix. Compare the resulting bitmap dimensions and sharpness with the default capture. If the line changes, scale or a size-dependent rendering boundary may be relevant; that observation alone does not identify the underlying CSS or prove that scale is the cause. If it does not change, revert unrelated settings and continue with the element and its styles.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Choose the production scale based on the output you need. A smaller scale can reduce pixel dimensions and may make fine details less sharp; a larger scale increases output dimensions and can consume more memory. Keep the intended output width and height in mind, and make sure any later CSS sizing preserves the intended aspect ratio.
Inspect the affected element’s CSS and boundaries
When the line is already present in the returned canvas, compare its position with visible layout boundaries. Temporarily simplify the smallest relevant part of the page and recapture it. These are diagnostic leads, not established universal causes.
- Borders and backgrounds: Check whether the line aligns with a border, a background-color transition, or the edge of a nested element. Temporarily remove or change that one style to see whether the artifact moves or disappears.
- Images: Check whether it follows an image edge or the boundary between an image and its container. Test with the image removed or replaced by a solid-color block.
- Fractional layout boundaries: Inspect computed positions and dimensions for fractional CSS-pixel values. As a test, adjust one relevant size or position to a whole-pixel value; do not treat a change in appearance as proof of a general rounding bug.
- Transforms and positioning: Temporarily disable the relevant transform or positioning rule and recapture. If the result changes, reduce the test case until the responsible style is clear.
- Unsupported or differently rendered CSS: Simplify advanced styles around the affected area. html2canvas documents that unsupported CSS properties may not render as they do in the browser.
Build a minimal reproduction containing the affected element and only the styles, fonts, and images needed to preserve the symptom. A smaller test makes it easier to distinguish an element-boundary issue from an unrelated page effect and gives you a reliable way to verify a change across browsers.
Check remote images and canvas readability
If the captured element contains images served from another origin, check that those servers permit the relevant cross-origin use. Missing images and a canvas that cannot be read are different symptoms from an unexplained horizontal line, but they can complicate diagnosis or export.
Free tools Windows power users keep installed
One-click scans. No signup required.
Where appropriate, test the documented useCORS or proxy configuration. These options relate to cross-origin loading and readability; they are not general-purpose line-removal switches. Confirm whether the image actually loads in the capture and whether the browser allows the resulting canvas to be read. Do not enable a proxy without understanding which server will fetch the remote resource and what access that entails.
Rank #4
Use a controlled troubleshooting sequence
- Record the setup. Note the html2canvas version, browser and version, device pixel ratio, element dimensions, and relevant CSS. Keep a copy of the smallest page that reproduces the problem.
- Check the source page. If the line is visible before capture, investigate the page itself first. If it is not, continue to the returned canvas.
- Inspect the returned canvas. If the line is visible there, focus on html2canvas’s reconstruction of the affected DOM and CSS. If it is not, inspect the data URL’s decoded dimensions and each subsequent display, resize, or processing step.
- Compare a deliberate scale. Test the default against
scale: 1and record bitmap dimensions. Change no other setting in that comparison. - Simplify the element. Test borders, backgrounds, images, fractional boundaries, and transforms individually; retain only changes that resolve the minimal reproduction.
- Verify remote assets. For cross-origin images, check the server’s CORS behavior and test
useCORSorproxyonly when relevant. - Retest the actual output path. Confirm the final saved or displayed image at its natural dimensions, then repeat in the browsers and device conditions that matter to your application.
When documenting a fix for your team, include the browser, library version, scale, relevant CSS change, and before-and-after result. A result from one reproduction is useful evidence for that case; it is not proof that the same change fixes every horizontal line.
Common symptoms, likely investigation, and fixes
| Symptom | What it points to | Next check |
|---|---|---|
| The line is visible in the browser before capture. | The source page already contains the visible boundary or artifact. | Inspect the relevant element’s border, background, image edge, position, and computed styles. |
| The page looks clean, but the returned canvas contains the line. | The artifact enters during DOM/CSS reconstruction or capture. | Reduce the captured DOM, simplify the relevant CSS, and compare the default scale with a deliberate scale. |
| The returned canvas looks clean, but the decoded data URL image does not. | The difference is later in the export or inspection path, rather than visibly present in the canvas. | Compare intrinsic dimensions and inspect how the image is decoded, displayed, resized, or processed. |
| A remote image is missing or the canvas cannot be read. | Cross-origin loading or canvas-readability restrictions may be involved. | Check the image server’s CORS response and the relevance of useCORS or proxy. |
| The artifact changes when scale changes. | Output resolution or a size-dependent boundary may affect the rendering. | Compare dimensions and sharpness, then isolate the specific element or style. Do not assume scale alone is the cause. |
These are investigation paths, not ranked universal fixes. The right choice depends on whether the line exists in the returned bitmap, how the output is sized, and what the minimal reproduction shows.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Know when canvas limits or fidelity matter
html2canvas’s FAQ documents browser-dependent maximum canvas dimensions. A capture that is unusually large may encounter limits that vary by browser and device, so check the target environment rather than relying on a single maximum-size figure. If a large capture fails or behaves differently, reduce the captured area or output scale as a diagnostic and verify the dimensions that the target browser can handle.
Also account for the library’s CSS support limits. If a particular style is essential to an exact visual match, compare the result in the browser and the reconstructed canvas instead of assuming they must be identical. When exact browser-rendered output is required, choose an approach based on the fidelity your use case needs; the evidence here does not establish one alternative as a universal solution to horizontal lines.
Or skip the browser setup
If you need a website screenshot rather than a capture of an element inside your own page, ScreenshotNeo provides a screenshot API and MCP server. For a URL capture, send one GET request; the example below saves a WebP response. See the ScreenshotNeo API documentation for request options and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses indicate the page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. This is a URL-based screenshot service, not a drop-in replacement for capturing an arbitrary DOM element in your application.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
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.
