There is a first issue in your code : no animation will occur, since you only call requestAnimationFrame (rAF) once. You can think of rAF as a setTimeout that will trigger once the next time screen is available, not a setInterval that will call again and again each time.
Second issue is a classical javascript closure/binding/scope issue.
So first solution would be to switch to a more modern language like google Dart (:-)).
Other solution is, for instance, to bind your animate function to its parameters.
In javascript, if your do :
var myBoundFunction = someFunction.bind(null, arg1, arg2, arg3);
then later, calling
myBoundFunction();
will have the same effect as calling :
someFunction(arg1, arg2, arg3);
look here for more details, and about the use of the first argument :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
I could give you a hint on how to change your code, but anyway i guess you'll want to animate several lines, so you must change the way it works to make it more flexible.
I strongly encourage you to go object and define a line as an object having (x,y,...) and a draw and update method.
Something like (using a closure this time) :
var canvas = ... ; // do the DOM access only once
var context = ... ; // do the DOM accessd only once
var myObjectsToDraw = [];
function animate() {
... return and stop animation if some condition is met ...
requestAnimationFrame(animate);
... clear screen ..
// draw all objects
for (var i in myObjectsToDraw) myObjectsToDraw[i].draw();
// update all objects
for (var i in myObjectsToDraw) myObjectsToDraw[i].update();
}
myObjectsToDraw.push ( ... some object ... );
animate();
(( if you're interested, here's the animation loop i use :
http://jsfiddle.net/gamealchemist/KVDsc/
and my base fiddle with a bunch of small utilities
http://jsfiddle.net/gamealchemist/Vn2Nt/ ))