Canvas Transparency Mask Effect Percentage Masked

I've overlayed a canvas on a page hiding the content underneath. Then using on mousemove I clear the image overlay to reveal the content underneath as if it is being wiped off. I h

Solution 1:

Rough method : Check the imageData of your canvas.

var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var trans = 0;
for (var i = 0; i < imageData.data.length; i += 4) {
  if (imageData.data[3 + i] === 0) {
    trans++
  }
}
var percent = trans / (imageData.data.length / 4) * 100;

But don't do it in a setInterval, getImageData is slow and memory consumptive!

At least, do it only in a throttled mousemove event.

A better way would be as in these comments but I still didn't had time to write it.. If anyone wants to do it, I'd be glad to use it ;-)