adding up down motion to a line in canvas html5 -

i trying add normal , down motion 2 lines drawn in html5 using canvas . unable to.. kindly suggest me way overcome , there better way this. adding function here

function create_blades() {  canvas_context.moveto(60+x_pos,80); canvas_context.lineto(125+x_pos,40+y_factor); canvas_context.linewidth = 3; canvas_context.stroke();  canvas_context.moveto(60+x_pos,110); canvas_context.lineto(125+x_pos,60-y_factor); canvas_context.linewidth = 3; canvas_context.stroke(); //motion();   } 

you not describing motion here generic approach animate lines (or objects).

• update positions
• check boundaries/criterias
• clear canvas
• redraw shape
• loop

here live example.

var xpos = 0,  // holds current position (here, delta fixed pos)     ypos = 0,     dlty = 2,  // delta values     dltx = 2;  (function loop() {      xpos += dltx; // add delta values     ypos += dlty;      // check boundaries, here canvas edges     if (xpos < 0 || xpos > canvas.width) dltx = -dltx;         if (ypos < 0 || ypos > canvas.height) dlty = -dlty;          // redraw graphics     create_blades(xpos, ypos);      // loop     requestanimationframe(loop); })(); 

then draw function:

function create_blades(x_pos, y_factor) {      // clear canvas     canvas_context.clearrect(0, 0, canvas.width, canvas.height);      canvas_context.beginpath(); // need first      canvas_context.moveto(60 + x_pos, 80);     canvas_context.lineto(125 + x_pos, 40 + y_factor);     //canvas_context.linewidth = 3; // not needed here     //canvas_context.stroke();      canvas_context.moveto(60 + x_pos, 110);     canvas_context.lineto(125 + x_pos, 60 - y_factor);     canvas_context.linewidth = 3;     canvas_context.stroke();     //motion(); } 

as using fixed values in draw position passed arguments positions of course add that, should able see principle in how move shape.