title: Canvas: Animate bezier curve drawing
body: <p>im trying to make a line that crossing the canvas from left to right. im still in early stage to achieve that، to do that im using the following function to do the step by step animation </p>
  
  <pre><code>timer = window.setInterval(draw_line, 30);
  </code></pre>
  
  <p>my drawing function is like this</p>
  
  <pre><code>function draw_line()
      {
          context.fillStyle = "#000";
          context.fillRect(0, 0, canv.width, canv.height);
  
              context.beginPath();
          context.lineWidth = 2;
          context.strokeStyle = '#fff';
  
              //Where p1, p2, cp1, cp2 are point objects that has x &amp; y values already defined    
          context.moveTo(p1.x, p1.y);
          context.bezierCurveTo(cp1.x,cp1.y,cp2.x,cp2.y,p2.x,p2.y);
          context.stroke();
          context.closePath();
  
              // now i have to move p1, p2 ,cp1,cp2
              // now here is my problem
      }
  </code></pre>
  
  <p>i understand that i need to move  <code>p1.x+= a random number;</code> and also the same for cp1 and cp2, but what about <strong>p2</strong> the End point it should follow the line same track ! how can i achieve that ?</p>
  
  <p>Thank you</p>