Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →A blank html2canvas image on iPhone or iPad is usually a canvas-size or memory failure, not a broken web page. iOS Safari has lower, device-dependent canvas limits; when your requested bitmap is too large, Safari can return a blank or partly rendered canvas without throwing a useful error. Cross-origin images, inaccessible iframes, unsupported CSS, and an already tainted canvas are other common causes.
Measure the element before rendering, keep the pixel area within a safe range, make every image CORS-safe, and test a small same-origin control capture. For very large output or pixel-faithful screenshots, use tiled rendering or a browser screenshot service instead of relying on DOM reconstruction.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Apple iPhone 14, 128GB, Midnight - Unlocked (Renewed) | $300.00 | Buy on Amazon |
| 2 |
|
Apple iPhone 16, 128GB, Pink - Unlocked (Renewed) | $574.99 | Buy on Amazon |
| 3 |
|
Apple iPhone 15, 128GB, Black - Unlocked (Renewed) | $409.00 | Buy on Amazon |
| 4 |
|
Apple iPhone 13, 128GB, Midnight - Unlocked (Renewed) | $262.00 | Buy on Amazon |
| 5 |
|
Apple iPhone 16e, 128GB, Black - Unlocked (Renewed) | $389.00 | Buy on Amazon |
What html2canvas is actually doing
html2canvas does not ask Safari for a native screenshot. It walks the target DOM, reads computed styles, loads images, and paints an approximation into a new canvas. The result can therefore differ from what Safari displays. A CSS feature may not be implemented, a frame may be inaccessible, an image may be blocked by the same-origin policy, or the destination canvas may exceed an iOS limit.
Safari being listed as supported by html2canvas means the library can run there; it does not remove WebKit’s security rules, memory pressure, or canvas limits. The official FAQ says iOS limits are lower than desktop limits and depend on device RAM. The failure can be silent: the promise resolves, but the canvas is blank or only part of it is painted.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- This phone is unlocked and compatible with any carrier of choice on GSM and CDMA networks (e.g. AT&T, T-Mobile, Sprint, Verizon, US Cellular, Cricket, Metro, Tracfone, Mint Mobile, etc.).
- Please check with your carrier to verify compatibility.
- The device does not come with headphones or a SIM card. It does include a generic (Mfi certified) charging cable.
- Tested for battery health and guaranteed to have a minimum battery capacity of 80%.
| Failure class | Typical symptom | First check |
|---|---|---|
| Canvas dimensions or memory | Desktop works; iPhone returns white, black, or partial output, especially for a long page | Log CSS dimensions, scale, and resulting pixel area before calling toDataURL() or toBlob() |
| Cross-origin image or tainted canvas | Images disappear, or export throws a security error | Inspect each image origin and its CORS response headers |
| Unsupported CSS or resource | Text appears but a visual effect, SVG, video, or background is missing | Use a small control capture, then add features one at a time |
| Cross-origin iframe | The frame area is empty while the rest renders | Check whether its contentDocument is accessible from your origin |
| Repeated-capture memory retention | The first capture works; later captures become blank or fail | Release references and clear html2canvas’s image cache after a sequence |
Fix a blank capture step by step
1. Measure before rendering
The canvas pixel size is approximately scrollWidth × scrollHeight × scale². A retina scale of 2 quadruples the pixel count, so a page that fits at scale 1 can exceed iOS memory at scale 2. Start by logging the dimensions and using the smallest scale that meets your output requirement.
async function captureWithDiagnostics(element) {
const cssWidth = element.scrollWidth;
const cssHeight = element.scrollHeight;
const deviceScale = window.devicePixelRatio || 1;
const scale = Math.min(deviceScale, 2);
const pixels = cssWidth * cssHeight * scale * scale;
console.table({ cssWidth, cssHeight, scale, pixels });
if (!cssWidth || !cssHeight) {
throw new Error('The target has no measurable layout size');
}
const canvas = await html2canvas(element, {
windowWidth: cssWidth,
windowHeight: cssHeight,
scale,
useCORS: true,
logging: true,
onError(error) {
console.error('html2canvas resource error', error);
}
});
console.table({ canvasWidth: canvas.width, canvasHeight: canvas.height });
if (!canvas.width || !canvas.height) {
throw new Error('Safari returned an empty canvas');
}
return canvas;
}
Do not treat any single number as a universal iOS specification. A 2021 discussion in html2canvas issue #2514 described one report as a 4,096 × 4,096-pixel maximum canvas area and recommended splitting and merging the capture. The maintainer wrote: “This is not a bug in html2canvas. This is a limitation of iOS Safari. It only has a maximum canvas area of 4,096 x 4,096px.” That was a case-specific report, not a guarantee for every current iPhone or iPad. The current FAQ likewise describes a lower, RAM-dependent limit rather than one fixed maximum.
2. Set the render window explicitly
For an element that extends beyond the viewport, pass its layout dimensions as windowWidth and windowHeight. Without them, the reconstructed viewport can be smaller than the target and produce clipping or an apparently empty result.
const target = document.querySelector('#invoice');
const canvas = await html2canvas(target, {
windowWidth: target.scrollWidth,
windowHeight: target.scrollHeight,
scale: 1,
logging: true
});
canvas.toBlob(blob => {
if (!blob) throw new Error('Canvas export returned no blob');
const link = document.createElement('a');
link.download = 'invoice.png';
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);
});
Use scrollWidth and scrollHeight, not only getBoundingClientRect(), when the target contains overflow content. Confirm that the element is attached, displayed, and has non-zero dimensions at capture time.
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 errors3. Reduce the bitmap or render tiles
Lower scale, capture a smaller element, or split a long document into explicit sections. Render sections sequentially and merge the resulting canvases; this keeps each individual canvas below the platform limit.
async function captureSections(sectionElements) {
const pieces = [];
for (const section of sectionElements) {
const piece = await html2canvas(section, {
windowWidth: section.scrollWidth,
windowHeight: section.scrollHeight,
scale: 1,
useCORS: true,
logging: true
});
pieces.push(piece);
}
const merged = document.createElement('canvas');
merged.width = Math.max(...pieces.map(piece => piece.width));
merged.height = pieces.reduce((sum, piece) => sum + piece.height, 0);
const context = merged.getContext('2d');
let y = 0;
for (const piece of pieces) {
context.drawImage(piece, 0, y);
y += piece.height;
}
return merged;
}
const sections = [...document.querySelectorAll('.capture-section')];
const fullCanvas = await captureSections(sections);
For arbitrary documents, add section wrappers at natural page boundaries and capture them in order. If one section is still too large, subdivide it again. Merging cannot repair a section that was already blank, so check every piece before drawing it.
Rank #2
- 6.1" Super Retina XDR OLED, HDR10, Dolby Vision, 1000nits (typ), 2000nits (HBM), 2556x1179px at 460ppi, 3561mAh Battery
- 128GB 8GB RAM, Apple A18 (3nm), Hexa-core (2x4.04 GHz + 4x2.20 GHz), Apple GPU 5-core, 16‑core Neural Engine
- Rear camera: 48MP, f/1.6, wide + 12MP, f/2.2, ultrawide, Front Camera: 12MP, f/1.9, wide, iOS 18, upgradable to iOS 18.5
- 4G LTE: 1/2/3/4/5/7/8/12/13/14/17/18/19/20/25/26/28/29/30/32/34/38/39/40/41/42/48/53/66/71, 5G: n1/2/3/5/7/8/12/14/20/25/26/28/29/30/38/40/41/48/53/66/70/71/75/76/77/78/79 - Dual eSIM
- Unlocked for freedom to choose your carrier. Compatible with both GSM & CDMA networks. The phone is unlocked to work with all GSM Carriers & CDMA Carriers Including AT&T, T-Mobile, Verizon, Sprint., Etc.
4. Make images CORS-safe
An image loaded from another origin must either be delivered with an appropriate Access-Control-Allow-Origin response header or be fetched through a same-origin proxy. Set useCORS: true when the image server supports CORS:
const canvas = await html2canvas(document.querySelector('#card'), {
useCORS: true,
windowWidth: document.querySelector('#card').scrollWidth,
windowHeight: document.querySelector('#card').scrollHeight
});
The header must come from the image server, for example an origin-specific Access-Control-Allow-Origin value matching your site. If you cannot change that server, proxy the asset through your own origin and use the proxied URL. Check CSS background images, fonts, SVG files, and images added by scripts, not just visible <img> elements.
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 matchallowTaint is not an export workaround. It controls whether cross-origin images may be drawn, but a tainted canvas remains unreadable by browser export APIs under the same-origin security rules. A successful paint does not mean toDataURL() or toBlob() will be permitted.
5. Remove or redesign inaccessible frames and existing canvases
html2canvas cannot read the DOM of a cross-origin iframe because its contentDocument is protected. Capture only the frame’s placeholder, ask the framed application to provide a same-origin rendering, or take a native browser screenshot outside the page. Likewise, an existing canvas that was previously tainted by cross-origin data can make the final result unusable. Replace it with same-origin data or omit it from the reconstruction.
6. Isolate unsupported CSS and resources
Start with a small, same-origin element containing plain text and solid colors. If it works, add images, then backgrounds and SVG, then complex effects. This control capture distinguishes a size or memory failure from a rendering-support failure. Gradients, filters, blend modes, videos, and other browser effects may not reproduce exactly even when the page itself looks correct in Safari.
7. Instrument every capture
Keep logging: true while diagnosing and use the documented onError callback to record failed resources. Inspect the browser console and network panel for blocked images, failed fonts, and redirects. In a long-lived app that captures repeatedly, call html2canvas’s clearImageCache option after a capture sequence when appropriate, and drop references to old canvases and object URLs so Safari can reclaim memory.
Rank #3
- 6.1inch Super Retina XDR display. Aluminum with color-infused glass back. Ring/Silent switch
- Dynamic Island. A magical way to interact with iPhone. A16 Bionic chip with 5-core GPU
- Advanced dual-camera system. 48MP Main | Ultra Wide. Super-high-resolution photos (24MP and 48MP). Next-generation portraits with Focus and Depth Control. 4X optical zoom range
- Emergency SOS via satellite. Crash Detection. Roadside Assistance via satellite
- Up to 26 hours video playback. USB C, Supports USB 2. Face ID
Why only the first iOS screenshot works
A first successful capture followed by blank output usually means cumulative memory pressure rather than a mysterious one-shot rule. Each large canvas, decoded image, and cached resource can remain reachable until the page releases it. Capture at a lower scale, process one tile at a time, export and discard each canvas before continuing, revoke object URLs, and clear the image cache after the sequence. If the first capture is already blank, return to the dimension and CORS checks instead of treating it as a retention problem.
Choose the right rendering approach
| Requirement | Best fit | Trade-off |
|---|---|---|
| Small same-origin component, approximate visual output | html2canvas in the page | No server needed, but CSS support and canvas limits apply |
| Long document on iOS | Lower scale or tiled html2canvas captures | More code and possible seams at section boundaries |
| Cross-origin frames or assets you cannot change | Native or server-side browser screenshot | Requires a separate browser workflow and deployment resources |
| Exact browser pixels, repeatable automation, or PDF output | Server-side screenshot service | Network request and service cost, but avoids client canvas limits |
If your product requirement is a pixel-perfect screenshot of the page as Safari paints it, html2canvas is the wrong primitive: it reconstructs the DOM rather than capturing the compositor’s final pixels.
Or skip the browser setup
ScreenshotNeo is the first alternative to try when you need a website screenshot without shipping html2canvas code. It captures the page in a browser and can return PNG, JPEG, WebP, or PDF. Before capture it accepts the cookie or consent banner and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
See the complete parameter reference in the ScreenshotNeo documentation. A one-request capture looks like this:
Recommended Free Tools
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}`);
The API also supports full-page captures with lazy images loaded, CSS-selector element capture, dark mode, device presets and custom viewports, retina scale, PDF paper and page-range controls, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits for selectors, delays or network idle, request and resource blocking, custom headers, cookies, user agents and authorization, timezone and geolocation, transparent backgrounds, resizing, TTL-based caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.
Every feature is included on every plan: 1,000 shots per month free with no card, Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Sign up free to get 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting by symptom
The canvas is completely blank on an iPhone
Log the target dimensions and resulting canvas dimensions. If the pixel area is large, set scale: 1, reduce the capture region, or tile it. Test a small same-origin control element; if that also fails, verify that the target is laid out and visible before capture.
Rank #4
- This pre-owned product is not Apple certified, but has been professionally inspected, tested and cleaned by Amazon-qualified suppliers.
- There will be no visible cosmetic imperfections when held at an arm’s length.
- This product is eligible for a replacement or refund within 90 days of receipt if you are not satisfied.
- Product may come in generic Box.
Text renders but images do not
Inspect image responses for CORS headers, enable useCORS, and use a same-origin proxy when you control neither the image server nor its headers. Check CSS backgrounds and fonts as well as image tags.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Export throws a security error
The canvas is likely tainted. allowTaint does not make a tainted canvas exportable. Remove the offending cross-origin resource or serve it with CORS from an origin you control.
An iframe area is empty
A cross-origin iframe cannot be reconstructed because its document is inaccessible. Capture a same-origin representation or switch to a native/server-side screenshot.
The page is clipped or only the viewport appears
Pass the element’s scrollWidth and scrollHeight as windowWidth and windowHeight. Then check whether the resulting pixel area is too large for the device.
Changing PNG to JPEG did not help
Image format changes affect encoding size after rendering; they do not lower the canvas’s dimensions or fix CORS, iframe access, or unsupported CSS. Fix the rendering failure first.
FAQ
Is there one iOS canvas limit I can safely code against?
No. The limit varies with iOS Safari and device RAM. Use measured dimensions, conservative scale settings, and a fallback path rather than hard-coding one maximum.
Best Value
- 6.1" Super Retina XDR OLED, HDR10, 800 nits (HBM), 1200 nits (peak), 2532x1170px at 460ppi, 4005mAh Battery
- 8GB RAM, Apple A18 6-core CPU (2 performance + 4 efficiency cores), Apple GPU 4-core, 16‑core Neural Engine
- Rear camera: 48MP, f/1.6, wide, Front Camera: 12MP, f/1.9, wide, iOS 18.3.1, upgradable to iOS 18.5
- Connectivity: Global 4G LTE, Sub-6 GHz 5G, LTE, Wi-Fi 6, Bluetooth 5.3, NFC, USB-C, Wireless Charging (7.5W). (does not have mmWave 5G or MagSafe or physical SIM card) - Dual eSIM Only
- Unlocked for freedom to choose your carrier. Compatible with both GSM & CDMA networks. The phone is unlocked to work with all GSM Carriers & CDMA Carriers Including AT&T, T-Mobile, Verizon, Straight Talk., Etc.
Can html2canvas capture a page hosted in another origin?
It can reconstruct the page only when the resources it needs are accessible to the calling document. Cross-origin images require CORS or a proxy, and cross-origin iframe documents remain inaccessible.
When should I stop debugging html2canvas?
Stop when the requirement is exact compositor pixels, inaccessible third-party content, or reliable large-page automation. A native browser or server-side screenshot workflow matches those requirements better than DOM reconstruction.
Frequently Asked Questions
Is there one iOS canvas limit I can safely code against?
No. The limit varies with iOS Safari and device RAM. Use measured dimensions, conservative scale settings, and a fallback path rather than hard-coding one maximum.
Can html2canvas capture a page hosted in another origin?
Only resources accessible to the calling document can be reconstructed. Cross-origin images require CORS or a proxy, and cross-origin iframe documents remain inaccessible.
When should I stop debugging html2canvas?
Use a native browser or server-side screenshot workflow when you need exact compositor pixels, inaccessible third-party content, or reliable large-page automation.
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.
