1. Introduction

As you all know the new html5 canvas element allows people to render graphics inside the html page, just like flash or scalable vector graphics.

In this article, which consists of two parts, I am going to focus on the basics of game creation with this new html5 canvas element.

Therefore you need a browser with support for the canvas element and javascript. The latest Firefox, Opera, Chrome or Safari is the one that you want, because Internet Explorer 8 has no native support for canvas.

Javascript is what controls the interaction with the canvas element. It renders the graphics, plays the sounds and handles the (keyboard/mouse/controller) input. However playing sounds is beyond the scope of this article.

First I will create an html template which holds the canvas element and a reference to the javascript file. Second I will create a bouncing ball on the canvas element controlled by the javascript file. Third I will show user input handling with javascript. Fourth I will add two paddles for players. And fifth, I will add a basic score counter.

A basic understandig of html and javascript makes this tutorial easier to follow. Also some kind of notepad with syntax highlighting would be pleasant.

2. The Basics

Create a basic html file canvas-game-tutorial.html with a canvas element and a reference to a javascript file.


<html>
<head>
<title>Canvas Game Tutorial</title>
<script type=text/javascript src=canvas-game-tutorial.js></script>
</head>
<body>
<center>
<canvas id=canvas width=640 height=480>Canvas is not supported!</canvas>
</center>
</body>
</html>


This basic html contains a title Canvas Game Tutorial, a script reference canvas-game-tutorial.js and a canvas element in the body:


<canvas id=canvas width=640 height=480>Canvas is not supported!</canvas>


The canvas has an id canvas so it can be referenced from the javascript file, it has a width and height and a text Canvas is not supported! between the opening and ending tag in case the browser doesn't support canvas. Instead of text a picture can be shown or anything else you would like to input there.

Once loaded in your browser and empty page with only a title will be schown, because the canvas is filled with transparency by default.

Create a javascript file canvas-game-tutorial which renders a black rectangle on the canvas.


// Variables for the canvas and the context
var canvas, context;
// Variables for the resolution
var width, height;

// Initialize the game
function init() {
// Get the canvas element
canvas = document.getElementById('canvas');
// Check if canvas is supported
if ( canvas.getContext ) {
// Get the 2d context
context = canvas.getContext('2d');
// Set the width and height to the width and height from the canvas element
width = canvas.width;
height = canvas.height;
// Call the draw function
draw();
}
}

// Render the graphics
function draw() {
// Draw a black rectangle on the entire canvas
context.fillStyle = rgb(0,0,0);
context.fillRect(0, 0, width, height);
}


The double slashes // are lines with a comment. The javascript file has variables for the canvas, context, width and height. The canvas is the canvas element from the html file, thanks to it's id name. Context has the 2d context from the canvas to render on. Width and height are the width and height from the html canvas element.

The function init() setups the canvas and calls the function draw() which renders a black rectangle on the entire canvas. And then the javascript is done.

Once the javascript file is created replace


<body>


with


<body onload=init();>


in the html file. This will call the javascript function init() on load. This function will then fill the canvas with the color black. If you forget this replacing step, the function won't be called and nothing will be rendered.

3. Move A Ball

Now let's add a green ball to the playfield, the ball has a certain speed, position, radius and color. Once the ball has been added to the playfield it needs to moved and needs to bounce on the edges. For all of these actions the javascript file will be expanded and pieces will be rewritten.


// Variables for the canvas and the context
var canvas, context;
// Variables for the resolution
var width, height;
// Variables for the ball
var radius, xpos, ypos, dx, dy;

// Initialize the game
function init() {
// Get the canvas element
canvas = document.getElementById('canvas');
// Check if canvas is supported
if ( canvas.getContext ) {
// Get the 2d context
context = canvas.getContext('2d');
// Set the width and height to the width and height from the canvas element
width = canvas.width;
height = canvas.height;
// Set the ball variables
radius = 32;
dx = radius
dy = radius;
xpos = radius;
ypos = radius;
// Call the function loop every 50 ms
setInterval(loop,50);
}
}

// The main loop
function loop() {
move();
draw();
}

// The move function moves the ball
function move() {
// Move the ball
xpos+=dx;
ypos+=dy;
// Check for collisions and flip the direction
if ( xpos - radius <= 0 || xpos + radius >= width ) {
dx = -dx;
}
if ( ypos - radius <= 0 || ypos + radius >= height ) {
dy = -dy;
}
}

// Render the graphics
function draw() {
// Draw the black background
context.fillStyle = rgb(0,0,0);
context.fillRect(0, 0, width, height);
// Draw the green ball
context.fillStyle = rgb(0,255,0);
context.beginPath();
context.arc(xpos, ypos, radius, 0, Math.PI*2, false);
context.fill();
}


Some variables have been added for the ball. These variables will be set to it's radius to begin with. The variables will be updated in the move() function and there will also be checked for collisions, if there is a collision the speed will set to the opposite value from it's original. And in the draw() function a green ball will be drawn.

The init() function has been modified to include this function call:


setInterval(loop,50);


This function will call the loop() function every 50 milliseconds. The loop function() will call the functions move() and draw(). So every 50 milliseconds the ball will be moved (and checked for collisions) and a black background with a green ball is drawn.

So everything is in place now for a green bouncing ball on a black canvas on our white html page. Check out the results.

https://dl.dropboxusercontent.com/u/82972447/tdc/canvas-game-tutorial/canvas-game-tutorial-part-one.html

Edited by Jenswa on 2010-06-19 to clean up the code parts.
Edited by Jenswa on 2011-01-30 to change the game tutorial hyperlink.
Edit on 2013-12-23 by Jenswa: changed the link.