A horizontal line in an html2canvas export does not have one documented universal cause. Find where it enters the pipeline before changing settings: compare the browser page, the canvas returned by html2canvas, and the decoded image made from canvas.toDataURL(). If the line is in the returned canvas, investigate capture and rendering; if it is absent there but present in the decoded image or when displayed, investigate encoding, image dimensions, and later resizing.
This distinction matters because html2canvas reconstructs an image from DOM and CSS information rather than asking the browser for a native screenshot. Its output can differ from the page, and changing scale is a diagnostic test—not a guaranteed line-removal fix.
Start by locating the stage that adds the line
There are three useful comparison points:
- The rendered page: inspect the affected area in the browser at the same viewport and state used for capture.
- The returned canvas: inspect it before calling
toDataURL(). This shows what the capture renderer produced. - The decoded export: load the data URL as an image and check its intrinsic dimensions and appearance, separately from how it is later scaled on screen.
If the line is visible in the returned canvas, toDataURL() did not introduce it: focus on the captured DOM, CSS, dimensions, and html2canvas rendering. If the canvas looks clean but the decoded image does not, check that you are comparing the same image at its natural size and inspect any later image handling. A reported WHATWG issue discusses CSS scaling assumptions and data URL dimensions, but it is not proof that toDataURL() causes horizontal lines.
Record a reproducible baseline
Before changing the page, note the html2canvas version, browser and version, device pixel ratio, target element dimensions, and CSS that affects the element or its ancestors. Save the smallest page state that still reproduces the problem. Changing several styles or capture options at once makes it harder to tell which change mattered.
#1 Best Overall
Inspect the canvas before encoding it
Keep the returned canvas available and inspect it directly. The example below logs its bitmap dimensions and converts it to a PNG data URL only after the canvas has been created. It assumes html2canvas is already loaded on the page and that the target has id="capture".
const element = document.querySelector("#capture");
if (!element) {
throw new Error("Could not find #capture");
}
html2canvas(element)
.then((canvas) => {
console.log("Bitmap dimensions:", canvas.width, canvas.height);
console.log("CSS display dimensions:",
getComputedStyle(canvas).width,
getComputedStyle(canvas).height
);
// Inspect the canvas in the browser before encoding it.
document.body.appendChild(canvas);
// Encode the same canvas after inspection.
const dataUrl = canvas.toDataURL("image/png");
const image = new Image();
image.onload = () => {
console.log("Decoded image dimensions:", image.naturalWidth, image.naturalHeight);
document.body.appendChild(image);
};
image.onerror = () => console.error("Could not decode the canvas data URL");
image.src = dataUrl;
})
.catch((error) => console.error("html2canvas capture failed:", error));Compare the appended canvas and decoded image at their natural pixel dimensions. If either is shown with CSS that scales it, the on-screen appearance may reflect that display scaling rather than a change to the bitmap. Record both bitmap dimensions and CSS display dimensions; they are different measurements.
Test scale without assuming it is the fix
The documented scale option defaults to window.devicePixelRatio. That means the output bitmap can have different pixel dimensions from the element’s CSS dimensions. Test an explicit scale such as 1 to isolate resolution-related behavior, then compare the result with the default. This is a diagnostic experiment, not a universal repair: a line caused by a border, background edge, CSS limitation, or later image resizing may remain.
Rank #2
const element = document.querySelector("#capture");
html2canvas(element, { scale: 1 })
.then((canvas) => {
console.log("Scale 1 bitmap:", canvas.width, canvas.height);
document.body.appendChild(canvas);
})
.catch((error) => console.error(error));When comparing runs, keep the target, browser, viewport, and page state constant. A deliberate scale changes output resolution and may change sharpness. Choose a scale based on the intended pixel dimensions and use case; do not infer that a visually different result proves the line was caused by device pixel ratio.
Trace the line to an element or CSS boundary
If the returned canvas already contains the artifact, inspect the region where the line appears. Check whether it coincides with an element border, a background-color transition, an image edge, a fractional layout boundary, or a transformed element. These are leads to test, not established causes for every horizontal line.
- Use browser developer tools to identify the element at or immediately above and below the line.
- Temporarily remove or simplify that element’s border, background, image, positioning, and transform styles.
- Capture again with the same scale and dimensions.
- Restore styles one at a time until the line returns, then reduce the page to a minimal reproduction.
html2canvas reconstructs the image from DOM and CSS it understands; its CSS support is not identical to the browser’s full rendering behavior. A discrepancy can therefore be a rendering limitation rather than a defect in data URL encoding. If simplifying one rule removes the line, keep the reproduction and report the exact browser, library version, scale, CSS change, and before-and-after result.
Check dimensions and downstream display scaling
A canvas has bitmap dimensions, available as canvas.width and canvas.height. It can also be displayed at CSS dimensions that differ from those bitmap dimensions. The exported image represents the canvas bitmap; CSS applied to the canvas element or the later <img> element affects display size, not the underlying encoded pixel array.
Log the dimensions before export, then inspect the decoded image’s naturalWidth and naturalHeight. If those dimensions differ from what your application expects, trace where a resize or alternate source is applied. Compare the image at native size before judging whether a thin line is in the file or introduced by a scaled preview.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →const dataUrl = canvas.toDataURL("image/png");
const image = new Image();
image.onload = () => {
console.log({
canvasWidth: canvas.width,
canvasHeight: canvas.height,
imageWidth: image.naturalWidth,
imageHeight: image.naturalHeight
});
};
image.src = dataUrl;Account for remote images and canvas access
If the captured page includes remote images, check whether those images load successfully and whether their server responses permit cross-origin use. The documented useCORS and proxy options address cross-origin image loading or access where applicable. They are not general-purpose fixes for horizontal lines.
Rank #4
html2canvas(document.querySelector("#capture"), {
useCORS: true
})
.then((canvas) => {
const dataUrl = canvas.toDataURL("image/png");
console.log("Export created", dataUrl.length);
})
.catch((error) => console.error(error));Use useCORS only when the remote image server is configured to allow the required cross-origin request. A proxy is another documented option when suitable for the page and deployment. Distinguish a missing or unreadable remote image from a line artifact: first verify that the image itself appears correctly in the returned canvas. Also note that browsers impose maximum canvas dimensions; limits vary by browser and device, so test on the actual target environment rather than relying on one universal size threshold.
Troubleshooting by symptom
| What you observe | What to check next | Useful next step |
|---|---|---|
| The line is visible on the returned canvas | The captured element, relevant CSS, scale, and nearby edges or boundaries | Simplify the affected CSS and reproduce with one change at a time. |
| The canvas looks clean but the displayed export has a line | Decoded image dimensions and CSS or application resizing after export | Inspect the decoded image at natural size and trace subsequent transforms. |
| Remote images are missing or unreadable | The image server’s CORS response and the capture options | Test the documented useCORS or proxy path as appropriate. |
| The capture fails or produces unexpected output on a very large element | Browser- and device-dependent canvas size limits | Reduce the captured dimensions for diagnosis and test on the target browser/device. |
| A CSS simplification changes the artifact | The exact rule and its interaction with the captured element | Keep a minimal reproduction and document the browser, library version, and scale. |
These checks narrow down the pipeline stage; they do not establish a single cause from the symptom alone. Avoid reporting a change as a confirmed fix unless you reproduced the original line and verified the result after the change.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Build a useful minimal reproduction
A report is actionable when another developer can distinguish the input page from the capture configuration. Include:
- The html2canvas version and browser/version.
- The target element’s dimensions and the device pixel ratio.
- The capture options, especially whether
scale,useCORS, orproxyis set. - The smallest relevant HTML and CSS, including borders, backgrounds, images, positioning, and transforms near the line.
- Whether the line appears in the browser, returned canvas, decoded data URL image, or only after the image is resized.
- The bitmap and displayed dimensions, plus the result of a controlled comparison such as
scale: 1.
This information makes it possible to evaluate fidelity, resolution, and browser-specific behavior without treating every line as an encoding bug.
Or skip the browser setup
If you need a rendered website image rather than an html2canvas reconstruction of your application’s DOM, ScreenshotNeo offers a website screenshot API and MCP server. It is a different capture route, not a drop-in fix for an html2canvas artifact or a substitute for diagnosing your own canvas pipeline. A single GET request can return an image or PDF; see the ScreenshotNeo API documentation.
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 and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response includes X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots.
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:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsFrequently Asked Questions
Does calling toDataURL change the canvas pixels?
It exports the canvas contents as a data URL. Compare the returned canvas with the decoded image at natural size to establish whether the observed difference is in the encoded image or in later display handling.
Can html2canvas guarantee an exact browser screenshot?
No. It reconstructs output from DOM and CSS information and can only render CSS it understands, so its result can differ from the browser page.
Will setting scale to 1 always remove a horizontal line?
No. It is a controlled test for scale-related behavior, not a documented universal fix; inspect the returned canvas and the affected layout as well.
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.
Recommended Free Tools
