title: canvas: wait between line strokes / js sleep()
body: <p>I'm using canvas to draw a chart.
  I would like make it "animated", which means you can see how the lines are drawn.
  So I implemented a small "sleep" function. But now it waits the sum of ms of all sleep() callings before it starts drawing anything in the canvas. How can I make it waiting between each stroke?</p>
  
  <pre><code>function sleep(ms) {
      var time = new Date();
      time.setTime(time.getTime() + ms);
      while (new Date().getTime() &lt; time.getTime()) {}
  }
  </code></pre>
  
  <p>//this is how i use it, let me know if you need the whole context.</p>
  
  <pre><code>for ( var columnID in columns) {
      var tempX = startX;
      var tempY = startY;
  
      this.ctx.beginPath();
      this.ctx.strokeStyle = this.colors[columnID];
      for ( var key in this.data) {
          tempY = startY - this.data[key][columns[columnID]] * 2;
          tempX = tempX + stepWidth;
          this.ctx.lineTo(tempX, tempY);
          this.ctx.stroke();
          sleep(50);
          }
          this.ctx.closePath();
      }
  </code></pre>
  
  <p><strong>//UDATE:</strong>
  setTimeout() is also beeing ignored:</p>
  
  <p><a href="http://jsfiddle.net/pQ4Qg/7/" rel="nofollow">jsfiddle</a>(it messed up the scale, using fixed json, but it shows the context of my script)</p>