Video Element and globalCompositeOperation test

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<div id="block" style="display: block;">Loading ....</div>
<div style="display: none;">
    <video muted="true" id="video" loop="true" autoplay="true">
                <source src="http://f7e397235b7ff71857e7-2936cacd2db585f07d4943608e0d08b7.r63.cf2.rackcdn.com/GifArt_Video_Teat_1.webmvp8.webm" type="video/webm" />
        <source src="http://f7e397235b7ff71857e7-2936cacd2db585f07d4943608e0d08b7.r63.cf2.rackcdn.com/GifArt_Video_Teat_1.theora.ogv" type="video/ogg" />
        <source src="http://f7e397235b7ff71857e7-2936cacd2db585f07d4943608e0d08b7.r63.cf2.rackcdn.com/GifArt_Video_Teat_1.mp4video.mp4" type="video/mp4" />
    </video>
</div>
<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"...

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 r, path, raster, background, imagesrc;
    var preloadAmount = 10;
    var cache = [];
    var imgurcache = [];
    var rArray = [];
    var convertedArray = [];
    var ajaxlength = [];
    var autoShowNext = false;
    var loaded = false;
    var value = isNaN(value) ? 0 : value;
    var valueajax = isNaN(valueajax) ? 0 : valueajax;
    var press = isNaN(press) ? 0 : press;
    var cvs = document.getElementById("mycanvas");
    var canvas_options_form = document.getElementById("canvas-options");
    var canvas_filename = document.getElementById("canvas-filename");
    var pre = document.getElementById("preloader");
    var v = document.getElementById('video');
    var b = document.getElementById('block');
    var clearCanvas = false;

    var animationFrame = new AnimationFrame();

    v.oncanplay  = function () {
        b.style.display = 'none';
        animloop();
    };

    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);
    }

    function animloop() {
        animationFrame.request(animloop);
        for (var i = 0; i < compositeTypes.length; i++) {
            var ctx = document.getElementById('tut' + i).getContext('2d');
            ctx.globalCompositeOperation = 'source-over';
            ctx.fillStyle = "#09f";
            ctx.fillRect(15, 15, 70, 70);
            //if (v.paused || v.ended) return false;
            ctx.drawImage(v, 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,...