title: HTML5 - delay canvas drawing
body: <p>I have a simple chunk of code to draw a line in a page. My problem is that I don't know much about HTML5 or JS and I need help to set a delay on the drawing of this line.
  I want to be able to choose if I want to see it drawing instantly when opening the page or define it to have 5 seconds delay before being draw.</p>
  
  <p>Here it is:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="1250" height="120"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
  
  var canvas = $("#myCanvas")[0];
  var c = canvas.getContext("2d");
  var amount = 0;
  var startX = 164;
  var startY = 120;
  var endX = 1094;
  var endY = 120;
  
  setInterval(function() {
      amount += 0.01; // change to alter duration
      if (amount &gt; 1) amount = 1;
      c.clearRect(0, 0, canvas.width, canvas.height);
      c.strokeStyle = "black";
      c.lineWidth=1;
      c.strokeStyle="#707070";
      c.moveTo(startX, startY);
      // lerp : a  + (b - a) * f
      c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount);
      c.stroke();
  }, 0);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you for the help!</p>