Draw a line animated continously

Question

I want to draw a line in canvas continously. I've read from many source. There's an example draw them with svg and jquery.

What im trying to do is , draw a lines continously without jquery or svg like this example http://jsfiddle.net/UtmTh/ . Is it possible?

Draw a line in track like this.

function draw_line(param1,.......) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //just function to draw a lines
}
function line_track() {
      //set X & Y position start
      var x = 0;
      var y = 30;

      //set X & Y position finish
      //in here i want to create a finish position of line after animation run,
      like a jsfiddle example//

}

Help & teach me if my plan and design is gone wrong please.

Answer 1

Like the comments says, the only use of JQuery library is the first line, getting the canvas element.

you can change this by using var canvas = document.getElementById("paper"); .

In addition, if you repeat the drawing you don't have to perform clearRect and moveTo every draw cycle.

 var canvas = document.getElementById('paper'); var c = canvas.getContext("2d"); var startX = 50; var startY = 50; var endX = 100; var endY = 100; var amount = 0; c.strokeStyle = "black"; c.moveTo(startX, startY); setInterval(function() { amount += 0.05; // change to alter duration if (amount > 1) amount = 1; // lerp : a + (b - a) * f c.lineTo(startX + (endX - startX) * amount, startY + (endY - startY) * amount); c.stroke(); }, 30); 

 <canvas id="paper" width="500" height="500"></canvas>