javascript - Trying to compare two Canvas elements -

i using below code compare 2 canvas elements

function createimage(html, can) {      var canvas = $( "#" + can );      var ctx = canvas[0].getcontext("2d");      var data = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'>" +                     "<foreignobject width='100%' height='100%'>" +                         "<div xmlns='http://www.w3.org/1999/xhtml'>" +                             html +                         "</div>" +                     "</foreignobject>" +                 "</svg>";     var domurl = self.url || self.webkiturl || self;     var img = new image();     img.crossorigin = '';     var svg = new blob([data], { type: "image/svg+xml;charset=utf-8" });     var url = domurl.createobjecturl(svg);     img.onload = function () {         ctx.drawimage(img, 0, 0);         domurl.revokeobjecturl(url);     };     img.src = url;     //return img.src;     return canvas[0]; } var a1 = createimage("<span style='font-size:34px'><i><b>hello</b></i></span>","can1"); var a2 = createimage("<span style='font-size:34px'><i><b>hello</b></i></span>", "can2"); settimeout(function() {     var ctx1 = a1.getcontext('2d');     var imagedata = ctx1.getimagedata(0, 0, a1.width, a1.height);     var pixels = imagedata.data;     var ctx2 = a2.getcontext('2d');     var imagedata2 = ctx2.getimagedata(0, 0, a2.width, a2.height);     var pixels2 = imagedata2.data, count;     for(var = 0, il = pixels.length; < il; i++) {         if(pixels[i] == pixels2[i]){             count++;         }     }     if(count === pixels.length && count === pixels2.length){         alert("match");     } },5000); 

but returning me error below

unable image data canvas because canvas has been tainted cross-origin data.

how can rid of error?

the reason cross-origin error because of use of <svg> namespace declarations located @ http://www.w3.org/, of different origin:

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'>" +              "<foreignobject width='100%' height='100%'>" +                "<div xmlns='http://www.w3.org/1999/xhtml'>" +                     html +                "</div>" +              "</foreignobject>" +            "</svg>"; 

i can tell method 1 drawing dom objects canvas on mdn.

when re-access data way,

var ctx1 = a1.getcontext('2d'); var imagedata = ctx1.getimagedata(0, 0, a1.width, a1.height); 

you hit error:

unable image data canvas because canvas has been tainted cross-origin data.

you can test on chrome:

• your original version error
• another version namespace declarations removed, not throw error , @ same time blank due absence of namespace declarations

you can return data function avoid getting error. because of asynchronous nature of img.onload,

img.onload = function () {     ctx.drawimage(img, 0, 0);     domurl.revokeobjecturl(url); }; 

you have defer retrieval of data, forcing re-access data out of function , causing error.

thus, should use alternate method of building canvas dom objects not rely on <svg>, html2canvas.

function createimage(html) {     var dfd = new $.deferred();     var el = document.createelement("div");         el.innerhtml = html;         el.style.display = 'inline-block';         document.body.appendchild(el);     html2canvas(el, {       onrendered: function(canvas) {           document.body.appendchild(canvas);           document.body.removechild(el);           dfd.resolve(canvas.todataurl());       }     });     return dfd; } $.when(     createimage("<span style='font-size:34px'><i><b>hello</b></i></span>"),      createimage("<span style='font-size:34px'><i><b>hello</b></i></span>") ).done(function(a1, a2){    if (a1 === a2) {       alert("match");     } }); 

see demo.