title: While Loop with requestAnimtionFrame
body: <p>Im trying to make a time line drawn on a HTML5 canvas with JavaScript. I started out with a <code>while loop</code>, but it seems to malfunction within a <code>requestAnimationFrame</code> function. </p>
  
  <p>An if statement works fine, but Im wondering why the while loop and requestAnimationFrame function don't work together.</p>
  
  <p>This code <strong>works</strong></p>
  
  <pre><code>var x = 50
  function animate(){
      requestAnimationFrame(animate);
      c.beginPath();
      c.moveTo(50, halfway_y)
      c.lineTo(x, halfway_y)
      c.strokeStyle = "white"
      c.lineWidth = 5;
      c.stroke();
      if(x &lt; canvas.width - 50){
          x+=7
      }
  
  }
  
  animate()
  </code></pre>
  
  <p>This code <strong>doesn't work</strong>. The code just draws the line with no animation. </p>
  
  <pre><code>var x = 50
  function animate(){
      requestAnimationFrame(animate);
      c.beginPath();
      c.moveTo(50, halfway_y)
      c.lineTo(x, halfway_y)
      c.strokeStyle = "white"
      c.lineWidth = 5;
      c.stroke();
  
      while(x &lt; canvas.width){
          x+=7
      }
  
  
  }
  
  animate()
  </code></pre>