title: How to animate the drawing of a Curve with Canvas?
body: <p>i have a bunch of points that i wanted to slowly draw. I try setTimeOut and the effect from this <a href="http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/">tutorial</a>. But without so much success.</p>
  
  <p>The Function looks like this</p>
  
  <p><strong>Function:</strong> </p>
  
  <pre><code>var myFunction = function(ctx, grid, points) {
                  ctx.beginPath();
                  ctx.moveTo(points[0].x, points[0].y);
                  ctx.lineWidth = 2;
                  ctx.strokeStyle = '#2068A8';
                  ctx.fillStyle = '#2068A8';
                  var count = 1;
                  for (count = 1; count &lt; points.length; count++) {
                      ctx.lineTo(points[count].x , points[count].y);
                  }
                  ctx.stroke();
              }
  </code></pre>
  
  <p>Around this function there a many other drawing functions but i just want to animate only one.</p>
  
  <p>How can i slowly draw a function with canvas?</p>