CODEWITHSUNDEEP
javascripthtmlcanvas
Barry Dowd
Barry Dowd

Reputation: 168

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>

Upvotes: 0

Views: 215

Answers (1)

Kaiido
Kaiido

Reputation: 136638

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

Upvotes: 2

Related Questions