WORKING GIF.JS WITH GLOBAL COMPOSITE

by nhulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas id="can1"></canvas>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
html {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var can = document.getElementById("can1");
var animloop, oneMore, gif, gif2;
var color = "#" + Math.random().toString(16).slice(2, 8);
var w = window.innerWidth;
var h = window.innerHeight;
can.width = w;
can.height = h;

var v = isNaN(v) ? 0 : v;

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

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


function clearThis(x, y) {
    var ctx = document.getElementById('can1').getContext('2d');
    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.globalCompositeOperation = 'source-over';
        ctx.fillStyle = "#f30";
        ctx.beginPath();
        ctx.arc(x, y, 200, 0, Math.PI * 2, true);
        ctx.fill();

    }
}


function setupMouse(canvas, onMouseMove, preventDefault) {
    var rectLeft, rectTop;
    var hook = canvas.addEventListener.bind(canvas);
    var mouseDown = updateMouseStatus.bind(null, true);
    var mouseUp = updateMouseStatus.bind(null, false);
    hook('mousedown', mouseDown);
    hook('mouseup', mouseUp);
    hook('mousemove', updateCoordinates);
    hook('scroll', updateRect);

    function updateMouseStatus(b, e) {
        if (mouse.down) {
            v++;
        }
        mouse.down = b;
        updateCoordinates(e);
        if (preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
    }

    function updateCoordinates(e) {
        mouse.x = (e.clientX - rectLeft);
        mouse.y = (e.clientY - rectTop);
        onMouseMove(mouse.x, mouse.y);
    }

    function updateRect() {
        var rect = canvas.getBoundingClientRect();
        rectLeft = rect.left;
        rectTop = rect.top;
    }
    updateRect();
}


function animloop() {
   ...