title: Blinking in canvas context
body: <p>I'm using <a href="http://jsfiddle.net/7ZmYn/2/" rel="nofollow">this code</a> to draw something like waiting progress on page:</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;Preloaders&lt;/title&gt;
          &lt;link rel="stylesheet" href="css/index.css" /&gt;
          &lt;link rel="stylesheet" href="css/preloaders.css" /&gt;
  
          &lt;script src="js/lib/requestAnimFrame.js"&gt;&lt;/script&gt;
          &lt;script src="js/lib/timer.js"&gt;&lt;/script&gt;
          &lt;script src="js/lib/preloaders.js"&gt;&lt;/script&gt;
  
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="preloader1"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.css:</strong></p>
  
  <pre><code>html, body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p><strong>preloader.css:</strong></p>
  
  <pre><code>#preloader1 {
      display: block;
      width: 100%;
      height: 15px;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p><strong>requestAnimFrame.js:</strong></p>
  
  <pre><code>window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
          window.setTimeout(callback, 1000 / 60);
      };
  })();
  </code></pre>
  
  <p><strong>timer.js:</strong></p>
  
  <pre><code>var Timer = function(){
      "use strict";
  
      var prev = new Date().getTime();
      var speed = 1;
  
      this.start = function(){
          prev = new Date().getTime();
      }
  
      this.setSpeed = function ( s ) {
          speed = s;
      }
  
      this.getDelta = function( inSeconds ){
  
          var now = new Date().getTime();
          var delta = (now - prev) * speed;
          if (inSeconds) delta /= 1000;
          prev = now;
          return delta;
  
      }
  
  }
  </code></pre>
  
  <p><strong>preloaders.js:</strong></p>
  
  <pre><code>var PRELOADERS = {
      waiting1: function ( el ) {
          "use strict";
  
          var width  = el.offsetWidth;
          var height = el.offsetHeight;
          var speed  = 1;
  
          var v = [0, 0, 0, 0]; // values
          var e = [0, -0.5, -1, -1.5]; // elapsed
  
          var canvas = document.createElement( "canvas" )
          canvas.style.display = "block";
          canvas.width         = width;
          canvas.height        = height;
  
          el.appendChild( canvas );
  
          var ctx = canvas.getContext('2d');
  
          var c = [ // colours
              [255,60,60],  // red
              [255,200,60], // yellow
              [80,220,40],  // green
              [40,120,220]  // blue
          ]
  
          var o = [0,1,2,3]; // order
  
          var drawRect = function ( w /* width: 0..1 */, c /* colour: [r,g,b | a] */ ) {
  
              if (c.length == 4) ctx.fillStyle = "rgba("+c[0]+","+c[1]+","+c[2]+","+c[3]+")";
              else ctx.fillStyle = "rgb("+c[0]+","+c[1]+","+c[2]+")";
  
              var hw = width / 2; // half-width
              ctx.fillRect( hw-hw*w, 0, width*w, height );
  
          }
  
          var easing = function ( val ) {
              return -val*(val -2)
          }
  
          var next = function ( ) {
              var ot = o.slice(0);
              o = [ot[1], ot[2], ot[3], ot[0]];
          }
  
          this.update = function ( delta ) {
  
              for (var i = 0; i &lt; 4; i++) {
  
                  e[i] += delta * speed;
  
                  if (e[i] &gt; 2) {
                      e[i] = 0;
                      next();
                  }
  
                  v[i] = easing( Math.min(1, Math.max(0, e[i])) );
  
                  drawRect( v[o[i]], c[o[i]] );
  
              }
  
          }
  
          this.setSpeed = function ( s ) {
              speed = s;
          }
  
      }
  }
  </code></pre>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>var init = function(  ){
      "use strict";
  
      var timer = new Timer();
      var preloader1 = new PRELOADERS.waiting1( document.getElementById( "preloader1" ) );
      // preloader1.setSpeed(0.1);
  
      var animate = function( ) {
          render( );
          requestAnimFrame( animate );
      }
  
      var render = function( ){
          var delta = timer.getDelta( true );
          preloader1.update( delta );
      }
  
      animate();
  
  }
  
  window.onload = init;
  </code></pre>
  
  <p>But sometimes rectangles on canvas are blinking.
  Help me to catch this bug please.</p>