Quickfix for Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

Here's a quick tip which had me stumped for 20mins, and could not find an answer on the internet quickly.

If you are attempting to draw an image that you have received cross-origin onto a canvas, and receive the error:

Quickfix for Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

Along with making sure your cross-origin server has the appropriate headers (see enable cross-origin resource sharing), make sure you also manually set the crossOrigin property on the image you're loading in:

var image = new Image(); image.crossOrigin = 'Anonymous'; image.src = 'http://someotherdomain.com/image.png';

See the MDN article about CORS enabled images for more info on a "tainted" canvas.