It is a great idea to use images from our CDN on HTML canvas. Unfortunately, browsers restrict access to canvas if an image was downloaded from an untrusted source. By default, only images from the same origin are treated as trusted. Calling getImageData() or toDataURL() will result in SecurityError:
canvas.toDataURL();
// Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
canvas.getContext('2d').getImageData(0, 0, 100, 100);
// Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
One of the solutions is using the crossOrigin image property to ask the browser to request the image in a safe way.
This property is available only in Chrome and Firefox, but it is very easy to make such requests manually with the help of XMLHttpRequest.
This works well in Chrome 19+, Firefox 6+, IE 10+, Safari 6+, and Opera 15+.