Drawing Triangles on the Canvas

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!

Onwards!

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.