The HTML <canvas> element is displayed as a rectangular object on a web page:
HTML Canvas
The <canvas> element is perfect for making games in HTML.
The <canvas> element offers all the functionality you need for making games.
Use JavaScript to draw, write, insert images, and more, onto the
<canvas>.
.getContext("2d")
The <canvas> element has a built-in object, called the getContext("2d") object, with methods and properties for drawing.
You can learn more about the <canvas> element, and the
getContext("2d") object, in our Canvas
Tutorial.
Get Started
To make a game, start by creating a gaming area, and make it ready for drawing:
Example
function startGame() {
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]);
}
}
Try it Yourself »
The object myGameArea will have
more properties and methods later in this tutorial.
The function startGame() invokes the method
start() of the
myGameArea object.
The
start() method creates a <canvas> element and inserts
it as the first childnode of the <body> element.