keep trying

by nhulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas id="c" style="z-index:1;"></canvas>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
html {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var can = document.getElementById("c");
var ctx = can.getContext("2d");

can.width = window.innerWidth;
can.height = window.innerHeight;

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

gif = GIF('http://i.imgur.com/17s9eZS.gif');
gif.on("rendered", redraw);
gif.render();

function redraw(mouse) {
    requestAnimationFrame(redraw(mouse));
    if (gif.rendered === true) {
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "#09f";
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, w, h);
        ctx.globalCompositeOperation = 'destination-in';
        ctx.fillStyle = "#f30";
        ctx.beginPath();
        ctx.arc(x, y, 200, 0, Math.PI * 2, true);
        ctx.fill();
    }
}

can.addEventListener("mousemove", function (e) {
    var mouse = {
        x: e.pageX,
        y: e.pageY
    };
    redraw(mouse);
}, false);

requestAnimationFrame(redraw(mouse));