title: How to progressively draw line animation in html5 canvas
body: <p>I am working with canvas. I have draw a set of lines. Here is my sample code</p>
  
  <pre><code>for(var i = 0 ; i&lt; points.length; i++){
  var point = points[i];
  
  setInterval(function() {
    ctx.strokeStyle = "black";
    ctx.moveTo(point.startX, point.startY);
    ctx.lineTo(point.startX1, point.startY1); 
    ctx.stroke();
   }, 500);​
  }
  </code></pre>
  
  <p>This code draws line after every 0.5 seconds. But I wish to animate it progressively.
  So kindly help to draw a line progressively.</p>
  
  <p>This screen shot show the output. I made this possible in SVG. But I need the same in canvas.</p>
  
  <p><img src="https://i.stack.imgur.com/nPUyD.gif" alt="enter image description here"></p>