Trying to compare two Canvas elements

Question

I am using below code to compare two canvas elements

function createImage(html, can) {
     var canvas = $( \"#\" + can );
     var ctx = canvas[0].getCont         


        

Answer 1

About the "cross origin policy" problems

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. SECURITY_ERR: DOM Exception 18

It's a security issue caused by the navigator "cross origin policy".

---

This error will appear if you have "dirtied" your canvas. This is done by drawing images to the canvas that are from a different origin. For instance, if your canvas is hosted at www.example.com, and you use images from www.wikipedia.org, then your canvas origin-clean flag is set to false internally.

Once the origin-clean flag is set to false, you are no longer allowed to call toDataURL or getImageData

---

Technically, images are of the same origin if domains, protocols, and ports match.

---

If you are working locally (file://) then any image drawn will set off the flag. This makes debugging annoying, but with Chrome you can start it with the flag --allow-file-access-from-files to allow this.

---

To learn more read the article: "Understanding the HTML5 Canvas image security rules".

Credits to Simon Sarris

My files are in the same domain or the chrome flag is activated and I still get this error, what's happening?

The problem is that Chrome (currently) always taints a canvas when an SVG document is drawn to it.

For a more detailed explanation see the question below:

Rasterizing an in-document SVG to Canvas

Ok, the use of svg seems to be the problem, so how to fix it?

At the time of my writing Antony answered it!

See his answer.