Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To include an element hidden with display: none or visibility: hidden in an html2canvas image, change its styles in html2canvas’s onclone callback. The callback operates on the cloned document used for rendering, so the original page does not need to show the element. Reveal any hidden ancestors too, and set appropriate layout styles so the element has the size and position you want.
Why html2canvas leaves hidden elements out
html2canvas does not capture the browser’s pixels like a conventional screenshot tool. It reads the page’s DOM and CSS, then reconstructs an image from the information and properties it supports. Its visibility reference test shows elements styled with display: none and visibility: hidden as hidden in the rendered result. The normal capture process does not automatically reveal them.
The project lists display, opacity and visibility among supported CSS properties. That means the renderer handles those properties; it does not mean it overrides a style that hides an element. Likewise, html2canvas’s ignoreElements option and data-html2canvas-ignore attribute are for excluding content, not including a hidden target.
The practical solution is to adjust the cloned document before rendering. html2canvas documents onclone for modifying the cloned content without affecting the original source document. The exact styles to set depend on your page’s CSS and layout.
#1 Best Overall
Reveal the target in the cloned document
Pass an onclone function in the options object. In the callback, locate the corresponding element in clonedDocument and change the hiding styles. Use a selector that identifies the target reliably; a stable ID or application-specific data attribute is generally preferable to a broad selector.
const target = document.querySelector('#report-panel');
if (!target) {
throw new Error('Could not find #report-panel');
}
const canvas = await html2canvas(target, {
onclone: (clonedDocument) => {
const clonedTarget = clonedDocument.querySelector('#report-panel');
if (!clonedTarget) {
throw new Error('Could not find #report-panel in the cloned document');
}
// Use the display mode that matches the element's intended layout.
clonedTarget.style.display = 'block';
clonedTarget.style.visibility = 'visible';
clonedTarget.style.opacity = '1';
}
});
document.body.appendChild(canvas);This is a starting pattern, not a universal style recipe. If the element is meant to be a grid or flex container, use grid or flex rather than block. If it is hidden by a CSS class, removing or overriding that class in the clone may be more appropriate than setting inline styles. Ensure the selected node is the one html2canvas is asked to render.
When the element uses display: none
An element with display: none does not participate in layout, so it may not have useful dimensions before it is revealed. Set an appropriate display value in the clone, then check the resulting width, height, margins and positioning. A hidden panel that should appear as a standalone card may need explicit width or positioning in the cloned document to avoid changing the intended capture layout.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
When the element uses visibility: hidden or opacity
Set visibility to visible if that property is hiding the target. If the element or an ancestor has opacity: 0, set opacity to a visible value as well. An element may have more than one hiding mechanism, so inspect computed styles rather than assuming a single property is responsible.
When an ancestor is hidden
Revealing only a child does not make it render if a parent remains hidden. Walk up the ancestor chain and find the element whose style or class removes the subtree from display. In the clone, reveal that ancestor too, while avoiding unrelated page sections that would add unwanted content to the capture.
Keep the live page unchanged
Changing the original element’s styles before calling html2canvas can work, but it alters the live page while capture takes place. Depending on rendering time and when the browser paints, a visitor may see a flash or layout shift. Restoring styles afterward reduces the duration of the change but does not guarantee that it was never visible.
Rank #3
The clone callback is the better fit when the element should appear in the image but remain hidden in the actual page. It lets the rendering copy differ from the live document. This is especially useful for hidden print layouts, export-only details, or content prepared for a generated report. You still need to choose styles that produce the desired geometry in the clone.
PC 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 & 11Outdated 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 matchCheck layout, CSS support and image access
Confirm the target and its dimensions
- Verify that the target exists in both the original document and the clone, and that html2canvas is called with the intended element.
- Check the target and its ancestors for
display: none,visibility: hidden, zero opacity, or a hiding class. - After revealing the element, verify its size and position. A previously undisplayed element may not have had meaningful layout dimensions.
- If the output is empty or clipped, the html2canvas FAQ suggests setting
windowWidthandwindowHeightto the target’s scroll dimensions:
const canvas = await html2canvas(target, {
windowWidth: target.scrollWidth,
windowHeight: target.scrollHeight,
onclone: (clonedDocument) => {
const clonedTarget = clonedDocument.querySelector('#report-panel');
if (clonedTarget) {
clonedTarget.style.display = 'block';
clonedTarget.style.visibility = 'visible';
}
}
});These options address viewport and canvas sizing; they do not reveal hidden content by themselves. Canvas size limits vary by browser, operating system and hardware, so very large captures can still fail or be clipped.
Account for CSS fidelity
Because html2canvas rebuilds the image from DOM information rather than copying the browser’s rendered pixels, the output can differ from what the page looks like on screen. The project’s online feature reference lists limitations including filter, object-fit, box-shadow, mix-blend-mode and zoom; transforms have limited support. The reference does not identify a release version, so behavior can differ from an older version installed in a project. If the revealed element depends on these styles, verify the output against your installed version.
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
Handle cross-origin images separately
Making an element visible does not grant permission to draw its external images into a canvas. Same-origin images are the uncomplicated case. For images hosted on another origin, browser origin rules may cause images to be omitted or prevent the canvas from being read. html2canvas documents the useCORS, proxy and allowTaint options, and its FAQ notes that a proxy may be needed for images outside the page’s origin. These options do not override browser security policy; the remote server’s CORS behavior and your configuration still matter.
When html2canvas is the wrong capture method
Use html2canvas when you want a DOM-based rendering that you can adapt before generating an image. Do not assume it will exactly match the browser’s pixels. If exact rendered pixels are the requirement, a browser-native screenshot capability may be a better fit; the appropriate method depends on the browser and environment. The html2canvas FAQ specifically advises against using html2canvas in browser extensions, where browsers provide tab screenshot support.
For hidden content, choose the method by the result you need: modify the clone to include content without changing the live page, modify the live DOM only if a temporary visible change is acceptable, or use a native screenshot route when the goal is an actual browser-rendered capture. Use the ignore mechanisms only when content should be left out.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot from a URL rather than a DOM element in your current page, ScreenshotNeo offers a website screenshot API and MCP server. A single GET request can return a PNG, JPEG, WebP or PDF. See the ScreenshotNeo API documentation for configuration 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 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 and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for AI agents using Claude, Cursor or another MCP client. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots, and yearly billing gives two months free. Every feature is available on every plan.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Recommended Free Tools
Quick Recap
Troubleshooting hidden-element captures
| Symptom | Likely cause | What to check |
|---|---|---|
| The target is missing | It remains hidden in the cloned document, or the selector does not match the cloned target. | Check the selector and the target’s computed hiding styles. Reveal the target in onclone and inspect hidden ancestors. |
| The target appears but is too small or misplaced | display: none prevented normal layout, or the restored display mode does not match the intended layout. |
Choose the correct display value and set the necessary dimensions or positioning in the clone. |
| The image is blank or clipped | The capture viewport or canvas dimensions may not cover the target. | Try windowWidth and windowHeight based on the target’s scrollWidth and scrollHeight; check browser canvas limits for large captures. |
| Styling differs from the page | The renderer does not support or fully reproduce a CSS property used by the target. | Compare the target’s styles with the project’s feature reference and simplify or replace unsupported effects where practical. |
| External images are missing or the canvas cannot be read | Cross-origin image access is restricted by browser policy or server CORS settings. | Check the image host’s CORS configuration and html2canvas’s documented proxy/CORS options. |
| The page visibly changes during capture | The live DOM is being altered instead of the cloned document. | Move capture-only style changes into onclone. |
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.
