COLORS WORKING FOR DESTINATION OUT

this one works now you need to add gifs to it

by nhulea

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/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 ctx1 = can.getContext("2d");
var can2 = document.getElementById("canvas2");
var ctx2 = can2.getContext("2d");
var animloop, oneMore, gif, gif2;
var color = "#" + Math.random().toString(16).slice(2, 8);
w = window.innerWidth;
h = window.innerHeight;
can.width = w;
can.height = h;
can2.width = w;
can2.height = h;

var v = isNaN(v) ? 0 : v;

gif = GIF('http://i.imgur.com/q0BSymL.gif');
gif.on("rendered", animloop);
gif.render();

ctx2.fillStyle = '#fff';
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 CC(c1, c2) {
    gif2 = GIF('http://i.imgur.com/dEnkeGy.gif');
    gif2.on("rendered", animloop);
    gif2.render();
    newcan = document.createElement('canvas');
    newcan2 = document.createElement('canvas');
    document.body.appendChild(newcan);
    document.body.appendChild(newcan2);
    newctx = newcan.getContext("2d");
    newctx2 = newcan2.getContext("2d");
    newcan.width = w;
    newcan.height = h;
    newcan2.width = w;
    newcan2.height = h;
    newctx2.globalAlpha = 0.3;
    newctx2.fillStyle = color;
    newctx2.fillRect(0, 0, w, h);
    newctx2.globalCompositeOperation = 'destination-out';
    newctx2.save();

    function clearThis(x, y) {
        newctx2.beginPath();
        newctx2.arc(x, y, 70, 0, Math.PI * 2, true);
        newctx2.fill();
        newctx2.restore();
    }
    //animloop(gif2);
    setupMouse(newcan2, clearThis, true);
}

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