Draw an image from Uploadcare on HTML Canvas

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 untrusted source. By default only images from the same origin are treated as trusted. If you’ll draw the image from other origins, the canvas will be marked as “dirty” and no pixel read will be possible from the canvas.

Calling getImageData() or toDataURL() will lead to 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 solutions is using the crossOrigin image property to ask browser to request the image in a safe way.

Live demo

Unfortunately this property is available only in Chrome and Firefox. But it is very easy to make such request manually with the help of XMLHttpRequest.

Live demo

This works well in Chrome 19+, Firefox 6+, IE 10+, Safari 6+ and Opera 15+.