HTML5 - Mastering the Canvas Element (V) - Custom shapes aka Paths

In the previous tutorials we learned to build shapes like rectangles, circles etc. But really, we don't have all the power till we can virtually build any shape we want by just specifying the coordinates of the various points comprising the shape.

In this tutorial, we're going to learn to use paths. A really cool tool that canvases provide us with to build awesome cool graphics.

I've briefly covered it in one of my previous tutorial series' parts (the series was called Building a drawing app), connecting the dots.

All about paths - in detail

Let's start talking about paths. If you've learnt LOGO in primary school (called "elementary school" in the U.S.) you probably know what a turtle is. Think of having a turtle in the canvas. You can tell it to move to a point or draw a line to a point from where it's at. If you don't know LOGO, just think about a turtle as a pencil.

You tell the turtle (pencil) to move to points and draw lines to points using moveTo and lineTo functions. These functions simple take in 2 parameters. The x and the y coordinates of the destination points.

But before we actually draw a path using the two above mentioned functions we have to tell the canvas to begin a path, so we call the beginPath function.

// Here's the syntax for the three functions
context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
.
.                    // You can have how many ever lineTos you want
.
context.lineTo(x, y);
context.closePath(); // Then we close the path

The close path function closes the path and draws a line back to the starting point. Which means you don't have to keep a track of the first point that you drew to close the figure.

But we haven't yet drawn the figure, we've just defined it. To actually draw the figure, we'll have to call the stroke() method of the context...

Drawing a rectangle with paths

Here's how you would go about drawing a rectangle with paths.

context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 200);
context.lineTo(200, 200);
context.lineTo(200, 100);
context.closePath();
context.stroke();

Note that we didn't have to say lineTo(100, 100) to draw a line back to the starting point. By calling closePath, the line automatically gets drawn to the starting point.

What's up next?

Now that you have infinite power, which means you can virtually draw any shape you want, I would like to warn you not to quit. Because in the upcoming tutorials, we'll learn something even cooler! Transformations, texts, shadows, animations, saving, images... They're all waiting for you!