GIFS WIP : ANIMATING IN ONE CIRCLE

this is the single image version so ajax yet..

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas id="canvas1" 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("canvas1");
var ctx = can.getContext("2d");
var animloop;
can.width = window.innerWidth;
can.height = window.innerHeight;
w = 250;
h = 250;

animloop = function () {
    requestAnimationFrame(animloop);
};

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

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

function redraw(mouse) {
    animloop = function () {
        requestAnimationFrame(animloop);
        ctx.save();
        ctx.beginPath();
        ctx.arc(mouse.x, mouse.y, 100, 0, Math.PI * 2, true);
        ctx.clip();
        if (gif.rendered === true) {
            ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, w, h);
        }
        ctx.restore();
    };
}