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>

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 animloop, oneMore;
can0.width = window.innerWidth;
can0.height = window.innerHeight;
can1.width = window.innerWidth;
can1.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
var v = isNaN(v) ? 2 : v;
var canvasName = 'canv' + v;
var canvasId = 'canvas' + v;
var ctxId = 'ctx' + v;
var ctx2Id = 'ctx' + v;
console.log(v);

gif = GIF('http://i.imgur.com/A04sRWO.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';

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

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

function createc(x,y) {
    v++;
    document.createElement('canvas');
    var canvasName = 'canv' + v;
    var canvasId = 'canvas' + v;
    var ctxId = 'ctx' + v;
    var ctx2Id = 'ctx' + v;
    console.log(ctx2Id);
    canvasName = document.createElement('canvas');
    canvasName.id = canvasId;
    document.body.appendChild(canvasName); // adds the canvas to the body element
    canvasName.width = window.innerWidth;
    canvasName.height = window.innerHeight;
    ctxId = canvasName.getContext("2d");
    ctx2Id = canvasName.getContext("2d");
    var img = new Image();
    img.onload = function () {
     //ctxId.drawImage(img, 0, 0, w, h);
    }  
    img.src = "http://placekitten.com/500/500";
    ctxId.drawImage(img, 0, 0, w, h);
    ctx2Id.fillStyle = '#222';
    ctx2Id.fillRect(0, 0, w, h);
    ctx2Id.globalCompositeOperation = 'destination-out';

    function alsoThis(x, y, ctx2Id) {
        console.log('here');
        ctx2Id.fillStyle = '#F00000';
 ...