Game Canvas

Learn to create a canvas container to provide an area for building the game.

We'll cover the following

The <canvas> elements provide various functionalities needed for creating games.

HTML

Let’s start by creating a container for the game. It is very simple, we just have to use the <canvas> element and specify the width and height attributes, like so:

<html>
  <canvas id='canvas' width="600px" height="500px">
  </canvas>
</html>

We have set a width equal to 600 pixels and a height equal to 500 pixels. You can set it according to your choice.

CSS

By using CSS, we will set the border and background color by using the code given below.

#canvas { 
  border: 1px solid rgb(23, 21, 158);
  background-color: rgb(201, 225, 233);  
}

Let’s see what output we get after adding the HTML and CSS part.

Let’s move to the main part, the JavaScript part in the next lesson.