Question

I have basic idea in mind, A ball is bouncing and after all bounces it should stop at stage animation completes.

Problem-

Ball bounces are good and animation is what i wanted it to be. But still it is not stopping when animation completes, it goes Down out of frame.

A solution i am not compatible with-

if(y>=300)
{
x=110;
y=300;
}

But ball is vibrating.

I want-

Ball should stop smoothly.

Fiddle link– http://jsfiddle.net/stackmanoz/xWvEU/

Answer 1

You need to clear the interval where you draw your animation.

On your code I did this changes:

function init()
{
  var ctx=document.getElementById("canvas").getContext("2d");

  return interval = setInterval(draw,10);
}

And then on the if:

if(y>=300)
{
    clearInterval(interval);
}

Check it on this fiddle