HTML Canvas Tutorial Part 1 – Setting Up Your Canvas


In this article we will start to learn about the HTML canvas. We will do a sequence of articles about the HTML5 canvas where we explore the topic in debt.  This will be the first part of that article sequence. At the end of this article sequence your will be familiar with almost all aspects of the HTML5 canvas. Once you finished it you will be able to create some stunning interactive and animated canvas designs.


What will we learn about the HTML canvas in this article?

  1. Setup our HTML canvas
  2. How to resize yourHTML canvas
  3. Learn how to draw shaped on your canvas


So lets jump right in and lets write some code

First we want to create a HTML and a JavaScript file. I will call mine index.html and main.js. Then we need to setup our HTML file with the default HTML, HEAD and Body tags like this.

<!DOCTYPE html>
<html lang="en">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">

Default empty html setup
Once you have setup your HTML file, the next step to add you HTML canvas is actually really simple. You just add the canvas tag within your body tag and presto, your HTML5 canvas is active.
Now lets have a look at our canvas in the browser. If we open our project in the browser and inspect the elements (right click inspect) we can see our canvas like this (if you have margin or padding at the top and left of your canvas, add a css file to reset the default css browser styling):html canvas insert
As you can see our HTML canvas has a width of 300 pixels and a height of 150 pixels. This is the default size of every HTML5 canvas once you inset it into your html file. But in most cases we want our canvas to cover the full background of our page, so lets fix that.
To reset the size of our canvas we need to add some JavaScript code. First lets connect our HTML en JavaScript file by adding the script tag into our HTML. We also want to add an ID to our canvas so we can easily target it in our JavaScript code.  Your HTML body should now like like this:
   <canvas id="canvas"></canvas>
   <script src="main.js"></script>

Now we have everything in place to start resizing our HTML canvas

Now lets go over to your main.js file and add a variable we name canvas. As a value for this variable we want the HTML canvas we have in our HTML file. We can do this with document.getElementById(‘canvas’). Since we gave our canvas an ID of canvas inside of our HTML, we can now grab it and use it as a value for our canvas variable inside of our main.js file.

Now that we saved our HTML canvas in a JavaScript variable, we can start manipulating it to cover our full web page. We do this by editing the style.width and style.height attributes of our canvas variable. We want to set these attributes equal to the window size like this:

 //Saving the HTML canvas into a JS variable
let canvas = document.getElementById('canvas');

//Set the width and height of the canvas equal to the widht and height of the window
canvas.height = window.innerHeight;  
canvas.width = window.innerWidth;
Now if we go back to our browser and inspect our HTML canvas, we can see that it stretches from the top to the bottom and left to the right.
html canvas full screen

Now lets actually draw something on our html canvas

To draw on our canvas we need to have a context for our canvas. This should be a 2d or 3d context. For now we will go with a 2d context and save it in a variable like this:

let c = canvas.getContext('2d');
Notice how I named the variable ‘c’, this is a naming convention and used by most people working with the canvas. I would advice to make use of the naming conventions people use. What this line of code does is telling the canvas that we want to make use of all of it’s 2d functionality. For example being able to draw circles, squares, add colors to objects and so on.
To create our first shape we need to manipulate the c variable we created. We will start with the c.fillRect() methode. The fillRect methode takes 4 arguments like this c.fillRect(xStartPosition, yStartPosition, width, height) and based upon these 4 arguments it will create a rectangle for you. To be a bit moe detailed:
  • X start position will be x pixels to the right from the top left corner
  • Y start position will be x pixels to the bottom from the top
  • The 2 points above will give you your starting point of the rectangle
  • Now the width and height you added will make out the size of your rectangle

So if we create this line of code:

c.fillRect(100, 100, 100, 100);
It will create a black square in your screen 100 pixels to the right and 100 pixels lower then the top left corner. Also the square itself will also have a width and height of 100 pixels. Now you can copy this line of code and change the numbers to create more squares in your screen.
c.fillRect(100, 100, 100, 100);
c.fillRect(200, 200, 100, 100);
c.fillRect(300, 300, 100, 100);
The code above will create something like this:
html canvas fillrect
Here you have a cool canvas example that you will be able to make at the end of this article sequence.

Leave A Reply