Edit in JSFiddle

window.onload = function(){
  var canvas = document.getElementById('canvas');
  if( ! canvas ||  ! canvas.getContext ){
    return false;
  }
  var ctx = canvas.getContext( '2d' );
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  ctx.fillStyle = "#51CDD7";

  var velocity = -30;
  var point = { x:ctx.canvas.width/2, y:ctx.canvas.height -50};
  var gravity = 2;
  var timer;
  var delay = 30;
  var r, g, b;

  function draw(x,y){
      ctx.beginPath();
      ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
      ctx.arc(x,y,20,0,Math.PI*2,true);
      ctx.fill();
  }

  var loop = function(){
    if(point.y > canvas.height - 20){
      velocity = -velocity;
      point.y = canvas.height - 20;
    }
    velocity = velocity + gravity;
    point.y = point.y + velocity;
    draw(point.x, point.y);
    clearTimeout(timer);
    timer = setTimeout(loop, delay);
  };

  loop();
};

<div id="container">
		<canvas id="canvas"></canvas>
	</div>

html,body{
    width: 100%;
    height: 100%;
    background: #4F728E;
}