Barry Dowd Barry Dowd - 7 months ago 27
Javascript Question

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 have added a timer event which calls a function every second.

What I am struggling with is how can I use this function to detect what percentage has been cleared. So we can trigger a function when say more than 75% of the canvas has been cleared.

Here is a jsfiddle https://jsfiddle.net/barrydowd/phgos32w/1/

Here is the code

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

<style>
p {position:absolute;top:0px;left:0px;width:400px;height:300px;}
#c {position:absolute;top:0px;left:0px; cursor: url(http://findicons.com/files/icons/2232/wireframe_mono/48/cursor_arrow.png), auto;}
</style>

<script type="text/javascript">

var ctx = "";
var img = "";

function get_cleared() {
//DO SOMETHING HERE TO GET THE PERCETAGE OF CANVAS CLEARED
}

function init() {
var int=self.setInterval(function(){get_cleared()},1000);
var canvas = document.getElementById('c');
ctx = canvas.getContext('2d');

img = document.createElement('IMG');

img.onload = function () {
ctx.beginPath();
ctx.drawImage(img, 0, 0);
ctx.closePath();
ctx.globalCompositeOperation = 'destination-out';
}

img.src = "http://dl.dropbox.com/u/12501653/FROST.png";

function drawPoint(pointX,pointY){
var grd = ctx.createRadialGradient(pointX, pointY, 0, pointX, pointY, 50);
grd.addColorStop(0, "rgba(255,255,255,0.6)");
grd.addColorStop(1, "transparent");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(pointX,pointY,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
}

canvas.addEventListener('touchstart',function(e){
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
},false);

canvas.addEventListener('touchmove',function(e){
e.preventDefault();
drawPoint(e.touches[0].screenX,e.touches[0].screenY);
},false);

canvas.addEventListener('mousemove',function(e){
e.preventDefault();
drawPoint(e.clientX,e.clientY);
},false);
}

</script>
</head>
<body onLoad="javascript:init();">
<div>
<p>testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... testing... </p>
<canvas id="c" width="400" height="400"></canvas>
</div>
</body>



Answer Source

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 ;-)