img based gif painting bb v1

by nhulea

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/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"...

CSS

body {
          margin: 20px;
          font-family: arial, verdana, helvetica;
          background: #d3f291;
      }
      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

var t = 0;
   var g = [];
   var gifArr = [
       'http://i.imgur.com/Q33fIsT.gif',
       'http://i.imgur.com/hP46lMz.gif',
       'http://i.imgur.com/jMYyTLI.gif',
       'http://i.imgur.com/hkWvvFL.gif',
       'http://i.imgur.com/xZ9nDmr.gif',
       'http://i.imgur.com/81ZNdZP.gif',
       'http://i.imgur.com/KrFqwW2.gif'];
   //console.log(gifArr);

   var animationFrame = new AnimationFrame(60);

   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 (var i = 0; i < compositeTypes.length; i++) {
       var label = document.createTextNode(compositeTypes[i]);
       document.getElementById('lab' + i).appendChild(label);
   }

   for (var i = 0; i < gifArr.length; i++) {
       var giff = GIF(gifArr[i]);
       giff.on("rendered", animloop);
       giff.render();
       g.push(giff);
       //console.log(g);
   }

   function animloop() {
       animationFrame.request(animloop);
       for (var i = 0; i < compositeTypes.length; i++) {
           var gifNum = i % 7;
           var gif = g[gifNum];
           console.log(gifNum);
           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();
           }
       }
   }

   animloop();