EXPERIMENT WITH ctx2.globalCompositeOperation = 'destination-out'; |STACKOVERFLOW VERSION | WORKING

by Nick Hulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas style='' id="canvas1"></canvas>
<canvas style='' id="canvas2"></canvas>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
html {
    background:red;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var can2 = document.getElementById("canvas2");
var ctx2 = can2.getContext("2d");
var animloop, oneMore;
var color = "#" + Math.random().toString(16).slice(2, 8);
can.width = window.innerWidth;
can.height = window.innerHeight;
can2.width = window.innerWidth;
can2.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
var v = isNaN(v) ? 0 : v;

ctx2.fillStyle = '#000';
ctx2.fillRect(0, 0, w, h);
ctx2.globalCompositeOperation = 'destination-out';

function clearThis(x, y) {
    ctx2.save();
    ctx2.fillStyle = color;
    ctx2.beginPath();
    ctx2.arc(x, y, 70, 0, Math.PI * 2, true);
    ctx2.fill();
    ctx2.restore();
}

var mouse = {
    x: 0,
    y: 0,
    down: false
};


function createC() {
    var oneMore = v++;
    var canvasName = 'canv' + oneMore;
    var canvasId = 'canvas' + oneMore;
    document.createElement('canvas');
    canvasName.id = canvasId;
    document.body.appendChild(canv); // adds the canvas to the body elemen
}


function setupMouse(canvas, onMouseMove, preventDefault) {
    var rectLeft, rectTop;
    var hook = canvas.addEventListener.bind(canvas);
    var mouseDown = updateMouseStatus.bind(null, true);
    var mouseUp = updateMouseStatus.bind(null, false);
    hook('mousedown', mouseDown);
    hook('mouseup', mouseUp);
    hook('mousemove', updateCoordinates);
    hook('scroll', updateRect);
    // var mouseOut = function() { mouse.down=false ; } ;
    // hook('mouseout', mouseOut); 
    function updateMouseStatus(b, e) {
        //alert('alert');
        mouse.down = b;
        updateCoordinates(e);
        //ctx.fillRect(0, 0, w, h);
        ctx.beginPath();
        ctx2.globalCompositeOperation = 'source-over';
        color = "#" + Math.random().toString(16).slice(2, 8);
        ctx.fillStyle = color;
        ctx.fill();
        if (preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
    }

   ...