Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to animate ball in html canvas like this.

ctx.arc(75, 75, 10, 0, Math.PI*2, true); 

enter image description here

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


share|improve this question

migrated from May 21 '12 at 16:56

This question came from our site for professional and enthusiast programmers.

up vote 4 down vote accepted

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(){

function init(){
    for(var i = 0; i < 10; i++){
        balls.push(new ball());   

function tick(){
    var i = 10;

    setTimeout(tick, 10);


Live Demo 1

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


      angle = -angle; // if the ball hits the bottom of the canvas reverse the angle.
    setTimeout(drawBall, 10);


Live Demo 2

share|improve this answer
Thanks! this is exactly what I want – Nick Sanders May 22 '12 at 4:06

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.

share|improve this answer
thanks. I've tried but I need example – Nick Sanders May 20 '12 at 3:10

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.