GIFS WIP circle working better performance

by Nick Hulea

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 mx = 0,
    my = 0;
var animloop, tryToLoadNextImage, giframe, urls;
can.width = window.innerWidth;
can.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
var img = new Image();
img.onload = function () {};
img.src = "http://placekitten.com/500/500";

animloop = function () {
    requestAnimFrame(animloop);

};

tryToLoadNextImage = function () {
    gif = GIF('http://i.imgur.com/P3VmNwy.gif');
    gif.on("error", tryToLoadNextImage);
    gif.on("rendered", animloop);
    return gif.render();
};

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

    redraw(mouse);
}, false);

function redraw(mouse) {
    animloop = function () {
        requestAnimFrame(animloop);
        ctx.save();
        //can.width = can.width;
        ctx.beginPath();
        ctx.arc(mouse.x, mouse.y, 100, 0, Math.PI * 2, true);
        ctx.clip();
        imageSmoothing(true);
        ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, w, h);
        ctx.restore();

    };
}
/*
function redraw(mouse) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(mouse.x, mouse.y, 10, 0, Math.PI * 2, true);
    ctx.clip();
    ctx.drawImage(img, 0, 0, w, h);
    ctx.restore();
}
*/
var mx = 0,
    my = 0;

function getMouse(e, canvas) {
    return {
        x: mx,
        y: my
    };
}

window.imageSmoothing = function (a, context) {
    var c;
    if (a == null) {
        a = false;
    }
    if (context == null) {
        context = ctx;
    }
    c = context;
    c.webkitImageSmoothingEnabled = a;
    c.mozImageSmoothingEnabled = a;
    return c.imageSmoothingEnabled = a;
};


tryToLoadNextImage();

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||...