JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

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/q0BSymL.gif');
   gif.on("rendered", animloop);
   gif.render();

   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);
       var ctx = document.getElementById('tut' + i).getContext('2d');

       // draw rectangle
       ctx.fillStyle = "#09f";
       ctx.fillRect(15, 15, 70, 70);
       //ctx.drawImage(img, 15, 15, 70, 70);
       //ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 15, 15, 70, 70);
       //set composite property
       ctx.globalCompositeOperation = compositeTypes[i];
       ctx.fillStyle = "#f30";
       ctx.beginPath();

       ctx.arc(75, 75, 35, 0, Math.PI * 2, true);
       ctx.fill();
   }

   function animloop() {
       requestAnimationFrame(animloop);
       ctx.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 15, 15, 70, 70);
       //draw();
   }
   requestAnimationFrame(animloop);

   'use strict';

   // Adapted from https://gist.github.com/paulirish/1579671 which derived from 
   // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
   // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

   // requestAnimationFrame polyfill by Erik Möller.
   // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon

   // MIT license

   if (!Date.now) Date.now = function () {
       return new Date().getTime();
   };

   (function () {
       var vendors = ['webkit', 'moz'];
       for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i)...