The canvas has been tainted by cross-origin data Browser Origin: On your device Last updated 15 Oct 2026

Console: SecurityError: Failed to execute 'toDataURL' / 'getImageData' on 'HTMLCanvasElement': Tainted canvases may not be exported

You drew an image from another origin onto a canvas without CORS permission, so the browser blocks reading pixels back out.

Exact message you may see The canvas has been tainted by cross-origin dataTainted canvases may not be exportedFailed to execute 'toDataURL' on 'HTMLCanvasElement'Failed to execute 'getImageData' on 'CanvasRenderingContext2D'Unable to get image data from canvas because the canvas has been tainted
Explore the map of this error Full error map →
Seen on: Chrome Firefox Safari JavaScript Nginx

Meaning

To protect users' data, drawing a cross-origin image taints the canvas. The fix is to load the image with CORS: set img.crossOrigin = "anonymous" and make sure the image server sends Access-Control-Allow-Origin. Local file:// pages are also treated as cross-origin.

Common causes

  • Image from a different domain drawn without crossOrigin
  • Image server not sending Access-Control-Allow-Origin
  • Page opened from file://
  • Image cached earlier without CORS headers
  • Redirect to a non-CORS URL

⚡ Quick fix

  1. Set img.crossOrigin = 'anonymous' before img.src
  2. Make the image server send Access-Control-Allow-Origin: * (or your origin)
  3. Serve images from your own domain/CDN with CORS

Detailed fix by platform

JavaScript

  1. const img = new Image(); img.crossOrigin = 'anonymous'; img.src = url; img.onload = () => ctx.drawImage(img, 0, 0);

Nginx

  1. location ~* \.(png|jpg|webp)$ { add_header Access-Control-Allow-Origin "*"; }

How to diagnose

  1. Origin — Is the image on another domain?
  2. Header — Does the image response include CORS?
  3. Cache — Cached without CORS earlier?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

$ is not defined — Console: Uncaught ReferenceError: $ is not defined (jQuery not loaded or loaded after your code) (Browser)$ is not definedAw, Snap! — Chrome: Aw, Snap! Something went wrong while displaying this webpage. Error code: STATUS_ACCESS_VIOLATION / SIGILL / Out of Memory (Browser)Aw, Snap!captive portal — Browser: This network requires you to sign in — captive portal (hotel, airport, café Wi-Fi) blocking HTTPS sites (Browser)captive portalclipboard write blocked — NotAllowedError: Failed to execute 'writeText' on 'Clipboard': Document is not focused. (JavaScript)clipboard write block…CORS — CORS Error: No 'Access-Control-Allow-Origin' header is present (API)CORSDevTools failed to load source map — DevTools: Failed to load source map — Could not load content for https://…/app.js.map: HTTP error: status code 404 (Browser)DevTools failed to lo…Extension context invalidated — Console: Uncaught Error: Extension context invalidated (extension was updated or reloaded) (Browser)Extension context inv…Failed to execute on 'Node' — Console: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' (Browser)Failed to execute on …The canva…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.