I want to animate ball in html canvas like this.
ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); 
start position is left top corner and ball's maximum height position is always the same
also I don't want to use javascript physics libraries
thanks
Theres a few ways to do this. Heres one way that keeps some physics like properties to make the balls look like they are bouncing realistically
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), balls = []; canvas.width = 600; canvas.height = 400; var ball = function(){ this.x = Math.random()*10; this.y= Math.random()*400; this.speed =(Math.random()*10)*.1; this.force = -this.speed*10; this.curForce = this.force; }; ball.prototype.update = function(){ this.x +=this.speed; this.y += this.curForce+=0.1; if(this.y >= 400){ this.curForce = this.force; } }; ball.prototype.render = function(){ ctx.beginPath(); ctx.arc(this.x,this.y,5,0,360); ctx.fill(); }; function init(){ for(var i = 0; i < 10; i++){ balls.push(new ball()); } tick(); }; function tick(){ ctx.clearRect(0,0,600,400); var i = 10; while(i--){ balls[i].update(); balls[i].render(); } setTimeout(tick, 10); }; init(); And heres a second way thats even easier and probably more of what you are looking for, but has no realistic physic properties to it at all.
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = 600; canvas.height = 200; // Ball stuffs var x = 0; y = 0, angle = 0; function drawBall(){ x+= 0.5; // this is the speed at which the ball moves to the right y+= Math.sin(angle); angle+=0.008; // To get exactly what you want play with this line ctx.clearRect(0,0,600,400); ctx.beginPath(); ctx.arc(x,y,5,0,360); ctx.fill(); if(y>=canvas.height){ angle = -angle; // if the ball hits the bottom of the canvas reverse the angle. } setTimeout(drawBall, 10); } drawBall(); There are two ways to do this, one is to do it using an image, and the other is to do it as you have started here, drawing the ball bouncing.
If you want to draw it, you will need an animation loop. In the loop you need to update the position of the ball, clear the contents of the canvas, and draw the ball in its position, and then repeat.
Your moving from left to right, so that should be at a constant rate, and then your bouncing. the basic way to bounce would be to use a sin() function to determine the position of the ball, when you reach the bottom you need to adjust to flip the arc so that it goes back up instead of continuing, a *-1 works, or the inverse of sin.
Lastly, if you want it to be realistic, you will need to ease the ball up and down, using an easing function. Check this link out for the easing function. http://jstween.sourceforge.net/moveSquare.html
