title: How to animate the drawing of a spiral
body: <p>Hi i have the following code that generates a spiral on a canvas, what I want is for the spiral to be animated as it is drawn, at this moment with below code, the spiral is fully drawn when the page loads. I want to see the spiral being drawn. I would like to use requestAnimationFrame to do the job.</p>
  
  <p>my html </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Spiral&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="canvas" style="border: 1px solid black" width="300" height="300"&gt;&lt;/canvas&gt;
  &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my Javascript</p>
  
  <pre><code>var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  ctx.moveTo(centerX,centerY);
  
  
      var gap =2;
      var steps = 60;
  
      var increment = 2*Math.PI/steps;
      var theta = increment;
  
  while(theta &lt; 20*Math.PI) {
      var newX = centerX + theta * Math.cos(theta) * gap;
      var newY = centerY + theta * Math.sin(theta) * gap;
      ctx.lineTo(newX,newY);
      theta = theta + increment;
  }
  ctx.stroke();
  </code></pre>
  
  <p>please see for jsfiddle <a href="https://jsfiddle.net/gustav1105/hx8tm43k/" rel="nofollow">https://jsfiddle.net/gustav1105/hx8tm43k/</a></p>