title: Why is my line not drawing over time?
body: <p>I am trying to have a line draw to the canvas over a certain amount of time(ten seconds to be exact).  I'm able to see that the script is counting to a certain time and then stopping, but I'm not seeing the line being drawn.  Can anyone show me what I'm doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    canvas = document.getElementById("test");
    ctx = canvas.getContext("2d");
    var count = 0;
    var start_x = 0;
    var start_y = 100;
    var end_x = 50;
    var end_y = 100;
  
    var counter = setInterval(countNumbers, 1000);
  
    ctx.beginPath();
    ctx.moveTo(start_x, start_y);
    console.log("Start");
    
    function countNumbers(){
      count += 1;
      ctx.lineTo((start_x + count), start_y);
      console.log(count);
      if((start_x == end_x) || (count == 10)){
        clearInterval(counter);
        console.log("End");
      }
    }
    
    ctx.lineWidth = 5;
    ctx.strokeStyle = "white";
    ctx.stroke();
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="test"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>