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?
- Setup our HTML canvas
- How to resize yourHTML canvas
- Learn how to draw shaped on your canvas
So lets jump right in and lets write some code
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
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.
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 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.
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:
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:
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.
The code above will create something like this:
Here you have a cool canvas example
that you will be able to make at the end of this article sequence.