ds604/jsbin.siwid.html

## jsbin.siwid.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div style="position:absolute;top:50px;left:50px;">
    <canvas id="canvas" width="500" height="500"></canvas>
  </div>

</body>
</html>

## jsbin.siwid.js
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded(){
  canvasApp();
}

function canvasSupport(){
  return Modernizr.canvas;
}

function canvasApp(){
  if (!canvasSupport()){
    return;
  }

  function drawScreen(){
    c.fillStyle = '#EEEEEE';
    c.fillRect(0,0,theCanvas.width,theCanvas.height);
    //Box
    c.strokeStyle = '#000000';
    c.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);

    if(ball.y + ball.radius <= theCanvas.height){
      ball.velocityy += gravity;
    } else {
      ball.velocityx = 0;
      ball.velocityy = 0;
      ball.y = theCanvas.height - ball.radius;
    }

    ball.y += ball.velocityy;
    ball.x += ball.velocityx;

    c.fillStyle = '#000000';
    c.beginPath();
    c.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
    c.closePath();
    c.fill();
  }

  var speed   = 4,
      gravity = 0.1,
      angle   = 305,
      radians = angle * Math.PI/180,
      radius  = 15,
      vx      = Math.cos(radians) * speed,
      vy      = Math.sin(radians) * speed;
  theCanvas = document.getElementById("canvas");
  c = theCanvas.getContext("2d");

  var p1 = {x:            20,
            y:            theCanvas.height - radius};
  var ball = {x:          p1.x,
              y:          p1.y,
              velocityx:  vx,
              velocityy:  vy,
              radius:     radius};

  function gameLoop(){
    window.setTimeout(gameLoop, 20);
    drawScreen();
  }

  gameLoop();
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div style="position:absolute;top:50px;left:50px;">
	<canvas id="canvas" width="500" height="500"></canvas>
	</div>

	</body>
	</html>
	window.addEventListener('load', eventWindowLoaded, false);
	function eventWindowLoaded(){
	canvasApp();
	}

	function canvasSupport(){
	return Modernizr.canvas;
	}

	function canvasApp(){
	if (!canvasSupport()){
	return;
	}

	function drawScreen(){
	c.fillStyle = '#EEEEEE';
	c.fillRect(0,0,theCanvas.width,theCanvas.height);
	//Box
	c.strokeStyle = '#000000';
	c.strokeRect(1,1,theCanvas.width-2,theCanvas.height-2);

	if(ball.y + ball.radius <= theCanvas.height){
	ball.velocityy += gravity;
	} else {
	ball.velocityx = 0;
	ball.velocityy = 0;
	ball.y = theCanvas.height - ball.radius;
	}

	ball.y += ball.velocityy;
	ball.x += ball.velocityx;

	c.fillStyle = '#000000';
	c.beginPath();
	c.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);
	c.closePath();
	c.fill();
	}

	var speed = 4,
	gravity = 0.1,
	angle = 305,
	radians = angle * Math.PI/180,
	radius = 15,
	vx = Math.cos(radians) * speed,
	vy = Math.sin(radians) * speed;
	theCanvas = document.getElementById("canvas");
	c = theCanvas.getContext("2d");

	var p1 = {x: 20,
	y: theCanvas.height - radius};
	var ball = {x: p1.x,
	y: p1.y,
	velocityx: vx,
	velocityy: vy,
	radius: radius};

	function gameLoop(){
	window.setTimeout(gameLoop, 20);
	drawScreen();
	}

	gameLoop();
	}