WORKING GIF.JS WITH GLOBAL COMPOSITE

by nhulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<table>
    <tr>
        <td>
            <canvas id="tut0" width="125" height="125"></canvas>
            <br/>
            <label id="lab0"></label>
        </td>
        <td>
            <canvas id="tut1" width="125" height="125"></canvas>
            <br/>
            <label id="lab1"></label>
        </td>
        <td>
            <canvas id="tut2" width="125" height="125"></canvas>
            <br/>
            <label id="lab2"></label>
        </td>
        <td>
            <canvas id="tut3" width="125" height="125"></canvas>
            <br/>
            <label id="lab3"></label>
        </td>
    </tr>
    <tr>
        <td>
            <canvas id="tut4" width="125" height="125"></canvas>
            <br/>
            <label id="lab4"></label>
        </td>
        <td>
            <canvas id="tut5" width="125" height="125"></canvas>
            <br/>
            <label id="lab5"></label>
        </td>
        <td>
            <canvas id="tut6" width="125" height="125"></canvas>
            <br/>
            <label id="lab6"></label>
        </td>
        <td>
            <canvas id="tut7" width="125" height="125"></canvas>
            <br/>
            <label id="lab7"></label>
        </td>
    </tr>
    <tr>
        <td>
            <canvas id="tut8" width="125" height="125"></canvas>
            <br/>
            <label id="lab8"></label>
        </td>
        <td>
            <canvas id="tut9" width="125" height="125"></canvas>
            <br/>
            <label id="lab9"></label>
        </td>
        <td>
            <canvas id="tut10" width="125" height="125"></canvas>
            <br/>
            <label id="lab10"></label>
        </td>
        <td>
            <canvas id="tut11" width="125" height="125"></canvas>
            <br/>
            <label id="lab11"></label>
        </td>
    </tr>
</table>

CSS

body {
          margin: 20px;
          font-family: arial, verdana, helvetica;
          background: #fff;
      }
      h1 {
          font-size: 140%;
          font-weight:normal;
          color: #036;
          border-bottom: 1px solid #ccc;
      }
      canvas {
          border: 2px solid #000;
          margin-bottom: 5px;
      }
      td {
          padding: 7px;
      }
      pre {
          float:left;
          display:block;
          background: rgb(238, 238, 238);
          border: 1px dashed #666;
          padding: 15px 20px;
          margin: 0 0 10px 0;
      }

JavaScript

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

   console.log(gif);

   var img = new Image();
   img.onload = function () {};
   img.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

   var compositeTypes = [
       'source-over', 'source-in', 'source-out', 'source-atop',
       'destination-over', 'destination-in', 'destination-out', 'destination-atop',
       'lighter', 'darker', 'copy', 'xor'];

   for (i = 0; i < compositeTypes.length; i++) {
       var label = document.createTextNode(compositeTypes[i]);
       document.getElementById('lab' + i).appendChild(label);
   }

   function animloop() {
       requestAnimationFrame(animloop);
       for (i = 0; i < compositeTypes.length; i++) {
           var ctx = document.getElementById('tut' + i).getContext('2d');
           if (gif.rendered === true) {
               ctx.globalCompositeOperation = "source-over"
               ctx.fillStyle = "#09f";
               ctx.fillRect(15, 15, 70, 70);
               ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 15, 15, 70, 70);
               ctx.globalCompositeOperation = compositeTypes[i];
               ctx.fillStyle = "#f30";
               ctx.beginPath();
               ctx.arc(75, 75, 35, 0, Math.PI * 2, true);
               ctx.fill();
           }
       }
   }

   requestAnimationFrame(animloop);