Untitled

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>My awesome game</title>
<style type="text/css">

canvas {
  margin: 0 auto;
  display: block;
}

h1 {
  display: block;
  text-align: center;
  margin-top: -300px;
}
</style>

<body data-rsssl=1>

<script type="text/javascript">

var gameArea;
var canvas;
var ball = new Ball(50,50,10);

window.onload = init;
var updateInterval = setInterval(update,1000/30);

function init(){
	initCanvas();

	gameArea.fillStyle = "lightblue";
	gameArea.fillRect(0, 0, canvas.width, canvas.height);

    ball.draw();
}

function initCanvas(){
	canvas = document.createElement("canvas");
	context = canvas.getContext('2d');
	canvas.width=500;
	canvas.height=500;
	document.body.appendChild(canvas);
	gameArea = context;
}

function update(){
	ball.update();
}

/**
* Ball Class
*/
function Ball(x,y,radius){

	this.x = x;
	this.y = y;
	this.radius = radius;
	this.color = 'darkgrey';

	this.vx = 0;
	this.vy = 10;

	this.draw = function(){
		gameArea.fillStyle = this.color;
		gameArea.beginPath();
		gameArea.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
		gameArea.fill();
	}

	this.update = function() {
		this.y = this.y + this.vy;
		this.x = this.x + this.vx;
	}
}

</script>

</body>