In part 2 of this HTML canvas tutorial we will pick up where we left in the previous part. So if you did miss the first part of the HTML canvas tutorial I would advice to read that first. Now we will go on and draw more shapes on to our HTML canvas.

The HTML5 canvas with a 2d context gives you the ability to draw rectangles,lines, arcs (also to create circles), bezier curves, images and text onto your canvas. In this post we will dive deeper into drawing line onto your canvas and using them to create other shapes like a triangle.

We will also have a look at coloring the elements we drawn onto our HTML canvas.

Drawing a lines onto our HTML canvas

In the previous part of this HTML canvas tutorial I showed you how to draw a rectangle on you canvas with:

c.fillRect(100, 100, 100, 100);
Now lets see how we can draw a line onto the HTML canvas. First we need to tell our canvas that we will be drawing a line. To do this we need to grab our ‘c’ variable we made and use it like this:
c.beginPath();
This will let your canvas know that you will start drawing a line. Now we need to indicate where we want our line to start. We do this by specifying an x and y coordinate and pass these to the c variable with an other methode like this:
c.moveTo(x, y);
Lets say we want to start drawing 100 px to the right from our first rectangle. To do this we would need to move 300 px to the right and 100 px down from the top left. Your code should look like this:
c.beginPath();
c.moveTo(300, 100);
Now that we have a start point for our line, we can start drawing it onto the HTML canvas with
c.lineTo(x, y);
In our example we will use 400 for the x value and 100 for the y value. This will draw a line from x 300 to x 400 and from y 100 to y 100. So that will make a horizontal line with a width of 100 px. Your code should now look like this:
c.beginPath();
c.moveTo(300, 100);
c.lineTo(400, 100);
If you now go over to your browser, you may notice that there still is no line. This is because we need to stroke our line with c.stroke();. So our complete code for the line would look like this:
c.beginPath();
c.moveTo(300, 100);
c.lineTo(400, 100);
c.stroke();
Now that we have our line drawn onto our HTML canvas, we can keep adding to this line, by adding more c.lineTo methodes. So we cloud do something like this for example to create a triangle:
c.beginPath();
c.moveTo(300, 100);
c.lineTo(400, 100);
c.lineTo(300, 200);
c.lineTo(300, 100)
c.stroke();
Your screen should look something like this:
HTML canvas lines dwarn
Now lets add some color to our canvas. We can color our canvas lines with the strokeStyle property. We can give this property any valid css color value like RGB, HEX and so on. In my example I will give the triangle a red color with a RGB value. We need to add the strokeStyle, before the c.stroke() methode like this:
c.beginPath();
c.moveTo(300, 100);
c.lineTo(400, 100);
c.lineTo(300, 200);
c.lineTo(300, 100)
c.strokeStyle = ‘rgb(225, 0, 0)’;
c.stroke();
But now you might be thinking, how do I color my rectangles, since they don’t make use of the c.stroke() methode? It’s actually quite simple. We use the fillStyle property to give color to our rectangles. With fillStyle it is important to notice that it will color all the rectangles below your piece of code. So if you want to color the first two blue and the last one red, your code would look like this:
c.fillStyle = ‘rgb(0, 0, 225)’;
c.fillRect(100, 100, 100, 100);
c.fillRect(200, 200, 100, 100);
c.fillStyle = ‘rgb(225, 0, 0)’;
c.fillRect(300, 300, 100, 100);
html canvas color shapes
Share.

Leave A Reply