Canvas transparency mask effect percentage masked
<p>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.</p>

<p>I have added a timer event which calls a function every second. </p>

<p><strong>What I am struggling with</strong> 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.</p>

<p>Here is a jsfiddle <a href="https://jsfiddle.net/barrydowd/phgos32w/1/" rel="nofollow">https://jsfiddle.net/barrydowd/phgos32w/1/</a></p>

<p>Here is the code</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /&gt;

    &lt;style&gt;
        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;}
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;

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

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

<p></p>