HTML5 Canvas: From Noob to Ninja - an interactive deep dive/

...

/

Drawing Triangles

Drawing Triangles

We'll cover the following...

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:

Press + to interact
<!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:

  1. Declare your intent to draw lines so that the canvas knows what to expect
  2. Move your virtual pen to to the x and y co-ordinate where you wish to start drawing the triangle
  3. With your virtual pen at the starting point, use the lineTo method to draw lines between two points.
  4. Specify the fill color, line color / thickness, etc. to adjust how your triangle
...