Game Canvas

The HTML <canvas> component is shown as a rectangular item 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>.


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:


function startGame() {

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 strategies later in this tutorial.

The work startGame() conjures the technique start() of the myGameArea object.

The start() technique makes a <canvas> component and supplements it as the first childnode of the <body> element.