BAD CANVAS!! canvas.toDataURL() Exception [SOLVED]

I recently encountered a frustrating issue while working on a site that uses images hosted on Amazon S3 and needs to manipulate them using HTML5 Canvas.

The Problem

Everything was working perfectly during development until we moved our images to Amazon S3. Amazon S3 serves images from a subdomain based on your bucket name (e.g., mybucket.s3.amazonaws.com), which creates a cross-domain situation.

When trying to use canvas.toDataURL() on a canvas containing these cross-domain images, browsers throw a security exception:

Uncaught SecurityError: Failed to execute 'toDataURL' 
on 'HTMLCanvasElement': Tainted canvases may not be exported.

This happens because the canvas becomes "tainted" when you draw an image from another domain onto it. For security reasons, browsers prevent extracting pixel data from tainted canvases to avoid potential cross-site data theft.

The Solution

The fix involves two key steps:

1. Set CORS headers on your S3 bucket

First, you need to configure your Amazon S3 bucket to allow Cross-Origin Resource Sharing (CORS). This involves adding a CORS configuration to your bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

You can set this in the AWS Management Console under your bucket's Permissions > CORS configuration.

For more specific control, replace the wildcard * with your actual domain.

2. Set the crossOrigin attribute on your images

The second crucial step is to set the crossOrigin attribute on your image elements before loading the image:

const img = new Image();
img.crossOrigin = "Anonymous";
img.src = "https://mybucket.s3.amazonaws.com/myimage.jpg";

If you're loading images dynamically:

function loadCORSImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "Anonymous";
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

// Usage:
loadCORSImage('https://mybucket.s3.amazonaws.com/myimage.jpg')
  .then(img => {
    ctx.drawImage(img, 0, 0);
    // Now you can safely use toDataURL()
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
  })
  .catch(err => console.error('Error loading image:', err));

Important Notes

1. The CORS headers must be set on the server hosting your images. If you don't control the server, you may not be able to implement this solution.

2. Some CDNs may strip CORS headers unless specifically configured to pass them through.

3. For existing images in the DOM, you can't retroactively add the crossOrigin attribute. The attribute must be set before the src attribute.

4. If using drawImage() with a video element, the same principles apply.

Conclusion

This issue is a common pitfall when working with HTML5 Canvas and external images. By properly configuring CORS on your S3 bucket and setting the crossOrigin attribute on your images, you can safely use canvas.toDataURL() and other pixel-manipulating methods without running into security exceptions.

If you're working with other cloud storage providers like Google Cloud Storage or Azure Blob Storage, you'll need to look up their specific methods for enabling CORS, but the client-side approach remains the same.

Note: This article was migrated from the original A thousand nodes blog (2012)