When you are working with the canvas element in HTML, you have some built-in functions that help you easily draw common shapes like circles, squares, and lines. Guess what shape you don't have a built-in function to help you easily draw?
If you guessed any shape other than a triangle, I weep for you. Because there is no built-in triangle function, drawing triangles on the canvas is a bit more involved and error prone than the other shapes:
Not to worry, though! In this tutorial, we will take a look at all the boring steps and how you can make drawing triangles really easy...and maybe even fun!
Brief Intro to Canvas
The canvas element allows you to programatically place pixels on the screen. It does all of this by expecting you to specify simple (and often tedious) draw commands that mimic the path a pen would take on a piece of paper. It's not as boring as I am making it out to be, but it's no episode of House of Cards either.
The DOM vs. Canvas article gives you better idea of why the canvas does things the way it does.
First, make sure you have a canvas element defined in your HTML page, and give it an id of myCanvas. To help you out with this, here is what my HTML looks like:
<!DOCTYPE html> <html> <head> <title>Triangle Canvas Example</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> </script> </body> </html>
There isn't much going on here except for the canvas element whose id value is myCanvas with a width and height of 500 pixels. It is inside this canvas element we will draw our triangle. Now that we got this boring stuff out of the way...
The way you draw a triangle is by putting into code the following steps:
- Declare your intent to draw lines so that the canvas knows what to expect
- Move your virtual pen to to the x and y co-ordinate where you wish to start drawing the triangle
- With your virtual pen at the starting point, use the lineTo method to draw lines between two points.
- Specify the fill color, line color / thickness, etc. to adjust how your triangle looks
These steps are deliberately pretty hand-wavy to not overwhelm you at this point. The overwhelming will take place next, so let's look at the code for drawing a simple rectangle first. We will weave these four steps in as part of explaining how the code works.
Inside the script tag, add the following lines of code:
var canvasElement = document.querySelector("#myCanvas"); var context = canvasElement.getContext("2d"); // the triangle context.beginPath(); context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(300, 300); context.closePath(); // the outline context.lineWidth = 10; context.strokeStyle = '#666666'; context.stroke(); // the fill color context.fillStyle = "#FFCC00"; context.fill();
Once you've done this, preview your page in your browser. If everything worked out properly, you should see a yellow triangle appear:
Let's look at how the lines of code you've written map to the triangle that you see on the screen. Starting at the top...
var canvasElement = document.querySelector("#myCanvas"); var context = canvasElement.getContext("2d");
These two lines are a mainstay at the top of almost every canvas-related code you will be dealing with. The first line gets a pointer the canvas element in our HTML. The second line gets you access to the canvas element's context object that allows you to actually draw things into the canvas.
Now, we get to the interesting stuff:
// the triangle context.beginPath(); context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(300, 300); context.closePath();
Because these lines are crucial to drawing our triangle, I'm going to slow down and dive into greater detail on what each line does.
The first line sets it all up:
The beginPath method signals to the canvas that you intend to draw a path. I know that is a very unsatisfying explanation, but I never said this line of code was deep and full of meaning. It will hopefully make more sense as we look at the rest of the lines :P
The next line defines where to start our path from:
That is handled by the moveTo function which takes an x and y co-ordinate value. In our case, we are going to be starting the path from a horizontal and vertical position of 100:
With the starting point set, it's time to start drawing the lines that make up our triangle:
context.lineTo(100, 300); context.lineTo(300, 300);
The first lineTo function draws a line from our starting point of (100, 100) to (100, 300):
The second lineTo function picks up from where the pen currently is and draws a line from (100, 300) to (300, 300):
Right now, we have an L shape that isn't quite a triangle. To make this a triangle, we need to close this path by drawing a straight line from where we are back to the beginning. There are two ways to accomplish this:
- One way is by specifying another lineTo function that looks like context.lineTo(100, 100). This will draw a line from your current (300, 300) position to (100, 100).
- The other way that you see in our code is by calling context.closePath(). The closePath() method tells your pen to draw a line back to the starting point.
Regardless of which approach you take, the end result is that you will now have a triangle:
At this point, you may be wondering why our triangle looks dotted and ghostly. If you haven't been wondering that, take a few moments and wonder.
Now that you are done wondering, here is why I visualize the lines in the way that I have. The five lines of code you've seen so far don't actually help you to see the triangle. What you've basically done is draw something that is entirely invisible:
The next two chunks of code fix that up. The first chunk is where we define the triangle's outline:
// the outline context.lineWidth = 10; context.strokeStyle = '#666666'; context.stroke();
The lineWidth and strokeStyle properties specify the thickness and color of the line we want to draw. The actual drawing of the line is handled by calling the stroke method. At this point, you will see a triangle whose outlines are actually visible:
The second chunk of code fills our triangle up with a color:
// the fill color context.fillStyle = "#FFCC00"; context.fill();
The fillStyle property allows you to define the color. The fill method tells your canvas to go ahead and fill up the insides of our closed path with that color. After this line of code has executed, you will end up with the triangle in its final form:
You now have a triangle that has an outline and a fill. It is, as some wise people say, complete.
Anyway, as you can see, drawing a triangle isn't particularly hard. At least, it should no longer be after seeing how easy it is to draw a few lines and set a few visual properties. It just requires you keeping track of where your virtual pen is at the end of a series of moveTo, lineTo, and closePath commands.
If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!
THE KIRUPA NEWSLETTER
Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!
( View past issues for an idea of what you've been missing out on all this time! )