img based gif painting bb v1

by Nick Hulea

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<canvas></canvas>
<img id='gif' src="http://i.imgur.com/17s9eZS.gif" alt=""></img>
<img id='gif2' src="http://i.imgur.com/ZTndwX0.gif" alt=""></img>

CSS

canvas {
    position:absolute;
    top:0px;
    left:0px;
}
img {
    width:0px;
    height:0px;
}
html {
    background-color:#fffccc;
}

JavaScript

var c = document.getElementsByTagName('canvas')[0],
    ctx = c.getContext('2d'),
    canvas = document.createElement('canvas'),
    ctx2 = canvas.getContext('2d'),
    gif = document.getElementById('gif'),
    gif2 = document.getElementById('gif2');

w = window.innerWidth;
h = window.innerHeight;

c.width = w;
c.height = h;

canvas.width = w;
canvas.height = h;

var animationFrame = new AnimationFrame(60);

function clear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

gif.addEventListener('load', function () {
    animationFrame.request(animate);
});

gif2.addEventListener('load', function () {
    animationFrame.request(animate);
});

document.addEventListener('mousemove', function (e) {
    ctx2.globalCompositeOperation = 'source-over';
    ctx2.beginPath();
    ctx2.arc(e.pageX, e.pageY, 100, 0, Math.PI * 2, false);
    ctx2.fill();
});

var animate = function () {
    ctx.globalCompositeOperation = 'source-over';
    ctx.clearRect(0, 0, w, h);
    ctx2.globalCompositeOperation = 'source-atop';
    ctx2.drawImage(gif, 0, 0, w, h);
    ctx2.globalCompositeOperation = 'source-over';
    ctx.drawImage(canvas, 0, 0, w, h);
    ctx.globalCompositeOperation = 'source-atop';
    animationFrame.request(animate);
};

animate();