How to draw lines on canvas

Question

I created several lines connected to each other on the canvas. Now I want to animate these lines when drawing on canvas.

Can anybody help?

here is my code and url script:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0,0,0); ctx.lineTo(300,100); ctx.stroke(); ctx.moveTo(0,0,0,0); ctx.lineTo(10,100); ctx.stroke(); ctx.moveTo(10,100,0,0); ctx.lineTo(80,200); ctx.stroke(); ctx.moveTo(80,200,0,0); ctx.lineTo(300,100); ctx.stroke(); 

http://jsfiddle.net/s4gWK/1/

Answer 1

I understand that you want the lines to expand along the points of your path using animation.

Demo: http://jsfiddle.net/m1erickson/7faRQ/

You can use this function to calculate waypoints along a path:

 // define the path to plot var vertices=[]; vertices.push({x:0,y:0}); vertices.push({x:300,y:100}); vertices.push({x:80,y:200}); vertices.push({x:10,y:100}); vertices.push({x:0,y:0}); // calc waypoints traveling along vertices function calcWaypoints(vertices){ var waypoints=[]; for(var i=1;i<vertices.length;i++){ var pt0=vertices[i-1]; var pt1=vertices[i]; var dx=pt1.x-pt0.x; var dy=pt1.y-pt0.y; for(var j=0;j<100;j++){ var x=pt0.x+dx*j/100; var y=pt0.y+dy*j/100; waypoints.push({x:x,y:y}); } } return(waypoints); } 

Then you can use requestAnimationFrame to animate each incremental line segment:

 // calculate incremental points along the path var points=calcWaypoints(vertices); // variable to hold how many frames have elapsed in the animation // t represents each waypoint along the path and is incremented in the animation loop var t=1; // start the animation animate(); // incrementally draw additional line segments along the path function animate(){ if(t<points.length-1){ requestAnimationFrame(animate); } // draw a line segment from the last waypoint // to the current waypoint ctx.beginPath(); ctx.moveTo(points[t-1].x,points[t-1].y); ctx.lineTo(points[t].x,points[t].y); ctx.stroke(); // increment "t" to get the next waypoint t++; } 

Answer 2

EDIT: I misunderstood your original post. For your situation, you do not need to clear the previous animation only when the animation is complete to start it all.

jsfiddle: http://jsfiddle.net/Grimbode/TCmrg/

Here are two websites that have helped me understand how animations work.

http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

In this article, William talks about sprite animation, which, of course, is not what interests you. Interestingly, it uses the recursive loop function created by Paul Irish.

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

This function will try to rotate 60 times per second (essentially at 60 frames per second).

 (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); 

So the big question is: how does it work? You just need to do this:

 function gameLoop () { window.requestAnimationFrame(gameLoop); renderLine(); } var counter = 0; var old_position = {x: 0, y: 0}; var new_position = {x: 0, y: 0}; var width = 10; var height = 10; function renderLine(){ /* Here you clear the old line before you draw the new one */ context.clearRect(old_position.x, old_position.y, width, height) /* you update your new position */ new_position = {x: 100, y: 200}; /* Here you call your normal moveTo and lineTo and stroke functions */ /* update old position with the nwe position */ old_position = new_position; } 

After this step, you will probably like your question. "Well, I have some kind of animation, but I don’t want my line animation to rotate at 60 frames per second." If you read the williams message, it uses tics.

The websites I am connected with are much better at explaining than I could. I suggest you read them. [= I had fun reading them.

And: Here is your jfiddle :)

http://jsfiddle.net/Grimbode/TCmrg/

Answer 3

The idea is to draw and draw and draw several different lines in a loop to have the illusion that it is “animating” . But in any case, this is the concept of animation.

So, determine what kind of animation you want to make, and find out how you can draw each frame in a loop.

This is a concept anyway. But I would advise you to use libraries for this.

Fabric.js ( http://fabricjs.com/ ) and KineticJS ( http://kineticjs.com/ ) are the libraries / frameworks I would point to.