STACKOVERFLOW VERSION | WORKING

by Nick Hulea

HTML

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

CSS

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

JavaScript

var can0 = document.getElementById("canvas0");
var ctx0 = can0.getContext("2d");
var can1 = document.getElementById("canvas1");
var ctx1 = can1.getContext("2d");
var can2 = document.getElementById("canvas2");
var ctx2 = can0.getContext("2d");
var can3 = document.getElementById("canvas3");
var ctx3 = can1.getContext("2d");
w = window.innerWidth;
h = window.innerHeight;
can0.width = w;
can0.height = h;
can1.width = w;
can1.height = h;
can2.width = w;
can2.height = h;
can3.width = w;
can3.height = h;
var animloop;

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

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

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

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


function clearThis(x, y) {
    ctx1.fillStyle = '#F00000';
    ctx1.beginPath();
    ctx1.arc(x, y, 70, 0, Math.PI * 2, true);
    ctx1.fill();
}

function clearThis2(x, y) {
    ctx3.fillStyle = '#F00000';
    ctx3.beginPath();
    ctx3.arc(x, y, 70, 0, Math.PI * 2, true);
    ctx3.fill();
}


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


animloop = function () {
    requestAnimationFrame(animloop);
    if (gif) {
        ctx0.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, w, h);
        if (ctx2) {
            ctx2.drawImage(gif2.frames[gif2.currentFrame()].ctx.canvas, 0, 0, w, h);
        }
    }
};


function setupMouse(canvas, onMouseMove, preventDefault) {
    var rectLeft, rectTop;
    var hook = document.getElementsByTagName('body')[0].addEventListener.bind(document.getElementsByTagName('body')[0]);
    var mouseDown = updateMouseStatus.bind(null, true);
    var mouseUp = updateMouseStatus.bind(null, false);
    hook('mousedown', mouseDown);
    hook('mouseup', mouseUp);
    hook('mousemove', updateCoordinates);
    hook('scroll',...