Question

I’m trying to overlay a canvas on a page in an attempt to make it look like it has been frosted over and then use mousemove to clear it away, following this post:

http://www.stevecalderon.com/2012/03/html5-canvas-tricks-transparency-mask-for-eraser-effect.html

I have created a jsfiddle – http://jsfiddle.net/ZWsG6/2/

var canvas = "";
var ctx = "";

function frost2(){

var int=self.setInterval(function(){clock()},1000);

canvas = document.createElement("canvas");

canvas.width = window.innerWidth;
canvas.height= window.innerHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
var objTo = document.getElementById("fltouch");
objTo.appendChild(canvas);

ctx = canvas.getContext('2d');

ctx.globalAlpha = 0.95;
ctx.fillStyle = "rgb(0, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = 'destination-out';    

function drawPoint(pointX,pointY){

    ///scrape
    var grd = ctx.createLinearGradient(pointX - 75,pointY-5,pointX + 75,pointY + 5)

grd.addColorStop(0, "transparent"); 
grd.addColorStop(0.3, "rgba(255,255,255,.6)"); 
grd.addColorStop(0.7, "rgba(255,255,255,.6)"); 
grd.addColorStop(1, "transparent"); 

ctx.fillStyle = grd;
ctx.fillRect(pointX - 75,pointY,400,30);

    }

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

}


function clock(){
ctx.globalAlpha = 0.95;
ctx.fillStyle = "rgb(0, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-out';    

}

I’ve added a function clock() to run every second and refill the canvas with the colour so that it needs to be cleared again but it doesn’t work, only remove the fill altogether.

Can anyone please tell how to reset the canvas to be filled with colour again? If it could be done slowly to look sorta like it is freezing over again that would be a bonus.

Answer 1

You need to set globalCompositeOperation back to default source-over value before refilling a canvas:

function clock() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.95;
    ctx.fillStyle = "rgb(0, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = 'destination-out';
}

http://jsfiddle.net/VqCbv/1/