canvas game

<!DOCTYPE html>

<html>

<head>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

function startGame() {

myGamePiece = new component(30, 30, "red", 10, 120);

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 480;

this.canvas.height = 270;

this.context = this.canvas.getContext("2d");

document.body.insertBefore(this.canvas, document.body.childNodes[0]);

this.interval = setInterval(updateGameArea, 20);

clear : function() {

this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

}

function component(width, height, color, x, y) {

this.width = width;

this.height = height;

this.speedX = 0;

this.speedY = 0;

this.x = x;

this.y = y;

this.update = function(){

ctx = myGameArea.context;

ctx.fillStyle = color;

ctx.fillRect(this.x, this.y, this.width, this.height);

}

this.newPos = function() {

this.x += this.speedX;

this.y += this.speedY;

myGamePiece.speedX = .4;

if (this.x>100) {

this.x = 0;

}

function updateGameArea() {

myGameArea.clear();

myGamePiece.newPos();

myGamePiece.update();

}

</script>

<p>The red square is actually being drawn 50 times per second.</p>

</body>

</html>