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

**Code:** `The canvas has been tainted by cross-origin data` · **Category:** Browser · **Seen on:** Chrome, Firefox, Safari, JavaScript, Nginx

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

## 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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/browser/canvas-tainted-cross-origin)