adding up down motion to a line in canvas html5 - html

Question

I am trying to add a normal up and down motion to my two lines drawn in html5 using canvas . but i am unable to..
Kindly suggest me a way to overcome this and is there any better way to do this.
I am adding the 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();
}

Answer 1

You are not describing the motion so here is a generic approach to animate lines (or any objects).
Update positions
Check boundaries/criterias
Clear canvas
Redraw shape
Loop
Here is a live example.
var xpos = 0, // holds current position (here, actually delta to 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 the draw function:
function create_blades(x_pos, y_factor) {
// clear canvas
canvas_context.clearRect(0, 0, canvas.width, canvas.height);
canvas_context.beginPath(); // need this 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 you are using fixed values in the draw position the passed arguments with positions will of course just add to that, but you should be able to see the principle in how you move the shape.