Tuesday , 16 July 2019
Home / Programming / JavaScript / Path API – Advanced JavaScript Tutorial
Path API
Path API

Path API – Advanced JavaScript Tutorial

The path API allows you draw custom shapes with paths.  You can create some really complex shapes and drawings with this API as it comes with powerful methods.


Clear your script and add this bit of code.

So, we first set up the stroke color and set it’s with to 2 pixels. Now, we can start drawing some awesome shapes with the path API. At the end of your condition statement, add this bit of code.

To start creating a custom drawing, you must first use the beginPath() method. This tells JavaScript you want to create a custom drawing. Now, we have access to a couple of methods to create our drawing. Add this bit of code next.

When you first create a path, JavaScript will assign the starting point at 0,0. This is the top left corner of your canvas. To move the starting/current point, then you use the moveTo() method. This method has 2 parameters which are the x and y coordinates. No lines are drawn when this method is used. It just moves the starting/current point.

The lineTo() method draws a line from the current point to a new coordinate. The current point will then be updated to the new coordinate. This method has 2 parameters which are the x and y coordinates.

Any lines or arcs created are drawn with invisible lines. So, we have to apply the stroke and fill manually. In our example, we use the stroke() method to apply the stroke to our path. Lastly, the closePath() method will close our path. Whatever the current point is, the closePath() method will draw a line from the current point to the origin point.

Let’s update our custom path to this.

In this example, we have 2 lines drawn.


Add this bit of code next.

Arcs are just curves. You can use the arc() method to create a full circle or a partial circle. Before we take a look at how to do that, let’s learn the parameters first. The first 2 parameters are the x and y coordinates. These coordinates will be the center of our circle.

The third parameter is the radius. This is half the width of the circle. The fourth parameter is the starting angle. Remember that circles are measured in degrees. So, the 0 degree point will be the start point of the circle. The fifth parameter is the ending angle. In our example, we input 360. So, our circle will be drawn from 0 to 360 degrees which is a full circle.

If we were to update the fifth parameter to 180, then we would get a half circle. The 6th parameter is if the arc should be drawn clockwise or counterclockwise.  False is for clockwise and true is for counterclockwise.

Another way of creating an arc is the arcTo() method. Let’s create a new path like so.

The arcTo() method is the most confusing method of them all as it draws arcs is different from the arc() method. This method has 5 parameters. The first 2 parameters are the starting x and y coordinates. The next 2 parameters are the ending x and y coordinates. The 5th parameter is the radius.

Here comes the tricky part. There are actually 3 points used to create the arc. Here’s how it works. Before the arc is created, JavaScript draws a line from the current point to the point used in the first 2 parameters. Then, another line is drawn from the point in the first 2 parameters to the point created in the 3 and 4th parameters. What you get is an angle.

Lastly, a circle is drawn into the corner depending on the radius. That’s the curve you get. The arcTo() method is something you have to experiment with to get the results you want.

There are 2 more methods called the quadraticCurveTo() and the bezierCurveTo() methods. These methods are even more bizarre in how they work. For that reason, we won’t discuss what they do as they do require a little more knowledge math.


You are only limited to your persistence and imagination. With patience and experimenting, you can draw a wide range of graphics with the paths API. For more information about these methods, then go here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.