October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run ScanOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
Canvas

Why html2canvas Produces Blank Images on iOS and How to Fix It

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If html2canvas returns a blank image on an iPhone or iPad, first check the rendered canvas dimensions and pixel area. iOS Safari has canvas limits that vary with device memory, and exceeding them can produce blank or partly rendered output without a useful error. If the canvas is small, investigate cross-origin images, inaccessible iframes, unsupported CSS, and repeated-capture memory use. Reduce the rendered area or scale, fix asset access, and test one failure class at a time.

Why a page that looks normal in Safari can produce a blank image

html2canvas does not take a native screenshot of Safari’s screen. It reads the DOM and computed styles, then reconstructs the target as a canvas. The result can therefore differ from the page the browser actually painted: CSS features may not be reproduced, cross-origin resources may be unavailable, and browser canvas limits still apply. A page appearing correctly in Safari does not prove that every part of it can be exported by html2canvas.

On iOS, canvas size is a particularly important first check. The html2canvas FAQ says Safari’s limits are lower than those on some other platforms and depend on device RAM. When a canvas exceeds the browser’s limit, output may be blank or incomplete without a clear exception. An html2canvas maintainer described a reported iOS Safari case in issue #2514 in 2021 as having a maximum area of 4,096 × 4,096 pixels, and suggested splitting the capture and merging the results. Treat that as a case-specific report from 2021, not a guaranteed limit for every current iPhone, iPad, or iOS release; the FAQ does not give one universal maximum.

Other common causes are different from a size failure. An image without usable CORS permission can taint the canvas, preventing export. A cross-origin iframe cannot be read through its contentDocument. And an existing canvas inside the target may already be tainted. Each calls for a different fix, which is why changing image format or increasing a timeout is not a reliable first response.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Apple iPhone 14, 128GB, Midnight - Unlocked (Renewed)
  • 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%.

Diagnose the failure before changing the page

1. Record the element’s CSS dimensions and the output canvas dimensions

Measure the target before rendering. Its CSS pixel area is scrollWidth × scrollHeight; the output canvas pixel area also depends on the render scale. For example, at scale 2, a target 2,000 CSS pixels wide by 3,000 CSS pixels high would request a 4,000 × 6,000-pixel output canvas. That calculation describes the requested size, not a guaranteed Safari threshold.

const target = document.querySelector("#capture");
if (!target) throw new Error("Capture target #capture was not found");

const width = target.scrollWidth;
const height = target.scrollHeight;
console.log({ width, height, cssPixelArea: width * height });

html2canvas(target, {
  logging: true,
  windowWidth: width,
  windowHeight: height,
  scale: 1
}).then(canvas => {
  console.log({
    canvasWidth: canvas.width,
    canvasHeight: canvas.height,
    pixelArea: canvas.width * canvas.height
  });
  canvas.toBlob(blob => {
    if (!blob) {
      console.error("Canvas export returned no image blob");
      return;
    }
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "capture.png";
    link.click();
    URL.revokeObjectURL(link.href);
  }, "image/png");
}).catch(error => {
  console.error("html2canvas render failed", error);
});

Use the measured canvas width and height, not only the visible size of the element. A long page may have a modest viewport but a very large scroll height. The example sets scale to 1 as a diagnostic baseline; if the resulting canvas is too large for the device, try a lower scale or a smaller capture region. Lower scale reduces pixel dimensions and file detail together.

2. Run a small control capture

Capture a small, same-origin element with plain text and no images. If that succeeds, add the original images, CSS effects, embedded canvases, and other components one at a time. If the control also fails, check whether the library is loaded and whether the call rejects or produces a zero-sized canvas. This sequence separates broad setup problems from size, asset, or rendering issues without changing several variables at once.

Rank #2
Apple iPhone 16, 128GB, Pink - Unlocked (Renewed)
  • 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.

Fix oversized or clipped captures

For a large element, set the render window to match its scroll dimensions. The windowWidth and windowHeight options help html2canvas lay out a large target using the intended window dimensions rather than the smaller visible viewport:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const element = document.querySelector("#report");
const canvas = await html2canvas(element, {
  windowWidth: element.scrollWidth,
  windowHeight: element.scrollHeight,
  logging: true
});

This can address clipping caused by the render window, but it does not make an arbitrarily large canvas safe for iOS. Inspect canvas.width and canvas.height after rendering. If the area is too large, reduce scale, capture a smaller element, or divide a long document into smaller regions. The issue #2514 discussion recommends splitting the region and merging the results for the reported case.

When tiling, make each region small enough to render reliably, capture regions sequentially, and assemble the resulting images in a context that can export them. Ensure adjacent regions do not omit content at their boundaries; a small overlap can help with elements that cross a tile edge, but the overlap must be cropped consistently during assembly. The exact tile dimensions depend on the device and content, so do not treat the 2021 issue’s 4,096-pixel figure as a safe tile size for every device.

Rank #3
Apple iPhone 15, 128GB, Black - Unlocked (Renewed)
  • 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

Long pages with lazy-loaded images need special attention: a section may look empty because its images have not loaded yet, independently of canvas limits. Confirm that each intended image has loaded before capture, then measure the actual target dimensions. Smaller regions may reduce memory pressure, but they do not correct missing or inaccessible source assets.

Make cross-origin images exportable

For an image hosted on another origin, the image server must permit the requesting page to use the resource through CORS, and the capture must request CORS handling. Configure the image before setting its source when you control the markup, and enable useCORS in html2canvas:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const image = document.querySelector("#remote-image");
image.crossOrigin = "anonymous";
image.src = "https://images.example.com/photo.jpg";

const canvas = await html2canvas(document.querySelector("#capture"), {
  useCORS: true,
  logging: true
});

The image server must return an appropriate Access-Control-Allow-Origin response header for the page’s origin (or a permitted wildcard where suitable). Setting useCORS: true cannot grant permission that the server does not provide. If you do not control that server, serve the asset through a same-origin proxy that is configured to retrieve it safely.

Rank #4
Apple iPhone 13, 128GB, Midnight - Unlocked (Renewed)
  • 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.

Do not use allowTaint as an export workaround. It controls whether html2canvas may draw cross-origin images that taint the canvas; browser security rules still prevent reading or exporting a tainted canvas. If export fails with a security error, remove the offending resource or make it CORS-accessible rather than trying a different output format.

Check iframes, embedded canvases, and CSS

Cross-origin iframes

A page cannot read the contents of an iframe from another origin through contentDocument. Since html2canvas reconstructs the DOM, it cannot reproduce the inaccessible iframe contents as if it had captured the browser screen. If you control the embedded page, place the capture content on the same origin or expose a safe way for the parent to obtain it. Otherwise, exclude the iframe from the reconstructed image or use a capture method that can render the complete browser page in an environment permitted to access it.

Existing canvas elements

If the target contains a canvas that was previously drawn with a cross-origin image lacking CORS permission, that embedded canvas may already be tainted. Capturing the parent does not undo that state. Test the embedded canvas separately, then fix the original asset-loading path or omit that element from the capture.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Best Value
Apple iPhone 16e, 128GB, Black - Unlocked (Renewed)
  • 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.

CSS features that do not reproduce

Because html2canvas rebuilds a page from DOM and CSS rather than recording Safari’s rendered pixels, unsupported or differently handled CSS can result in missing or incomplete regions. Compare the control capture with the full target and add styling features incrementally. If exact visual fidelity is a hard requirement and the missing feature cannot be simplified, html2canvas may be the wrong rendering primitive; use a native browser screenshot or a server-side browser workflow that fits your deployment and access requirements.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Prevent failures in repeated captures

An app that captures once may behave differently from a long-lived page that repeatedly renders large targets. Each capture can involve substantial image and canvas memory, and iOS devices have less headroom on some configurations. Capture sequentially rather than launching many large renders at once, dispose of output canvases and object URLs when they are no longer needed, and avoid retaining image blobs unnecessarily. The html2canvas documentation also describes clearImageCache as a way to release loaded-image memory after a capture sequence; use it as supported by the version of html2canvas in your application.

Keep logging on while diagnosing, inspect failed image resources, and handle both a rejected render and an unsuccessful export. A render that resolves to a canvas is not proof that the canvas can be exported: test the actual toBlob() or toDataURL() operation your app uses.

Troubleshooting by symptom

Symptom Likely cause What to check or change
Entire output is blank on a long page Canvas dimensions or pixel area exceed what the device can handle Log target and canvas dimensions; lower scale, reduce the region, or tile the capture.
Only part of the page appears Render window is smaller than the element, or output is near a platform limit Set windowWidth and windowHeight from the element’s scroll dimensions; then reduce area if needed.
Export throws a security error or returns no usable image A cross-origin image or embedded canvas tainted the result Check image origins and response headers; use useCORS with server permission or a same-origin proxy.
An embedded frame is missing The frame is cross-origin and its document is inaccessible Use same-origin content where possible, omit it, or choose a browser-capture workflow suited to the requirement.
Text appears but images do not Images failed to load, lack CORS permission, or were not ready at capture time Inspect failed resources, wait for intended images to load, and verify the server’s CORS response.
First capture works; later captures fail Repeated large renders may be exhausting available memory or retaining image data Run captures sequentially, release outputs, reduce capture size, and clear the html2canvas image cache where supported.

If none of these branches fits, reduce the case to the smallest element that still fails and record the iOS device and Safari version, target dimensions, output canvas dimensions, resources involved, and console errors. This information distinguishes a platform-sized canvas issue from a reproducible rendering or security failure.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Or skip the browser setup

If the requirement is an image of the rendered page rather than a DOM-to-canvas reconstruction, ScreenshotNeo offers a website screenshot API and MCP server. A single GET request returns a screenshot or PDF. Its clean-shot steps accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response includes X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.

For example, capture a page with cURL (see the ScreenshotNeo API documentation for options):

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

The same request in Python:

import 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)

Or in Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo includes 1,000 screenshots a month on its free plan with no card required; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account to try it.

Quick Recap

Bestseller No. 1
Apple iPhone 14, 128GB, Midnight - Unlocked (Renewed)
Apple iPhone 14, 128GB, Midnight - Unlocked (Renewed)
Please check with your carrier to verify compatibility.; Tested for battery health and guaranteed to have a minimum battery capacity of 80%.
$308.00
Bestseller No. 3
Apple iPhone 15, 128GB, Black - Unlocked (Renewed)
Apple iPhone 15, 128GB, Black - Unlocked (Renewed)
Dynamic Island. A magical way to interact with iPhone. A16 Bionic chip with 5-core GPU; Emergency SOS via satellite. Crash Detection. Roadside Assistance via satellite
$410.00
Bestseller No. 4
Apple iPhone 13, 128GB, Midnight - Unlocked (Renewed)
Apple iPhone 13, 128GB, Midnight - Unlocked (Renewed)
There will be no visible cosmetic imperfections when held at an arm’s length.; Product may come in generic Box.
$262.00

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.