Animation

Animation:

In canvas you can do anything if you have logic.Animation is very simple to do.Two thing keep in mind before you do anyting about animation first of all what  thing or object you are going to animate.Second a function which will change the  position every few secod.

setInterval function 

do the animation for you and it takes two parameter.FIrst is which thing will animate and duration means duration of each animation to another.10 second means  every ten second later it will execute the animate object.

Lets Code:

Your Browser Does not support HTML 5 Canvas Tag.

<script type="text/javascript" language="javascript">
window.onload=function(){
var canvas=document.getElementById("draw");
var mc=canvas.getContext("2d");
 var x=-350,y=50;
 var rotate=0;
 var anim=setInterval(startanim,190); 
 function startanim()
{
mc.clearRect(0,0,mc.canvas.width,mc.canvas.height);

mc.fillStyle="red";
mc.font="25px Arial Black";

mc.fillText("welcome to learn html 5 tutorial site",x,y); 

//mc.restore();
if(x<=mc.canvas.width)  
x+=10; 

if(x>mc.canvas.height)
{
x=-350;
}
 
};
}
</script>


<canvas width="600px" height="500px" id="draw">
Your Browser Does not support HTML 5 Canvas Tag.
</canvas>

Description:

first of all we set X and Y cordinates and we give it negative values because before animation we do not want to show our content.Then within setInterval  function we give a function name and duration.That means every 190 milisecond  later this function execute.All of our animation condition lyes on that  startanim  function.

startanim function
we clear our canvas each stage of animation.If not it will draw text every where   on its own path.
Then Draw some Text which will be animate.We give two variables in its  positions.So every 190 millisecond later values of these variable's value will change so  text will animate. Then we give a if condition and tell the browser if the X cordinates of the text  if less then the total weidth of canvas then add 10 each time when the staranim function run.So every 190 millisecond later it will add 10 to the x variable  that cause the move of the text.
Now when X cordinate is equal to total canvas weight then it will stop adding 10  .So that time we tell that when x cordinate is equal to total canvas weight then   set the x cordinate value -350 means the starting point.

Code hints:

Remember here we animate text but you can animate any shape or image just changing its X or Y by using above method.