How to compare content of two html5-canvas-elements?

Question

I would like to compare two images with javascript. One is drawn on a html5 canvas the other might be on another html5 canvas, or it might be a gif- or png-image-file. I need the comparision for automated testing. Thanks for help!

Answer 1

alright this isn't a complete solution for your problem but it might help you find a good way to compare the two canvas elements.

var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;

for(var i = 0, il = pixels.length; i < il; i++) {
    // pixels[i]
}

This is a basic example how to loop through all the pixels on the canvas. Depending on what you want to do you can compare the pixels with each other or you might want to compare the two imageData vars with each other