Game Canvas

The HTML <canvas> element is displayed as a rectangular object on the web page:

HTML Canvas

<canvas> element is very suitable for game development in HTML.

<canvas> element provides all the functionality needed to make games.

Please use JavaScript in <canvas> to draw, write text, insert images, and more.

.getContext("2d")

<canvas> element has a built-in object called getContext("2d") object, which provides methods and properties for drawing.

You can find more about our Canvas Tutorial to learn about <canvas> elements and getContext("2d") more knowledge about the object.

So, let's start

To make a game, first create a game area and prepare for drawing:

instance

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

In the later part of this tutorial, the object myGameArea will obtain more properties and methods.

function startGame() call myGameArea object's start() method.

start() method creates a <canvas> element, and insert it as the first child node to <body> within the element.