Working with Path Items

In this tutorial we are going to look at paths and the different ways to create and modify them in Paper.js projects.

In Paper.js, paths are represented by a sequence of segments that are connected by curves. A segment consists of a point and two handles, defining the location and direction of the curves.

In order to start with paths here, we will use segments that do not define handles for now and therefore are connected by lines instead of curves.

Lets create a new path item by using the new Path() constructor and add segments to it using the path.add(segment) function:

The add function also supports multiple arguments, which allows you to insert multiple segments in one go:

To insert segments in relation to already existing segments, you can use the path.insert(index, segment) function:

Paper.js allows you to automatically smooth paths using the path.smooth() function. This function calculates the optimal values for the handles of the path's segment points to create curves that flow smoothly through them. The segments are not moved and the current handle settings of the path's segments are ignored.

In the following example, we create a rectangle shaped path, create a copy of it and smooth the copy:

By default paths created through the new Path() constructor are open:

To close the path we set its path.closed property to true. Paper.js will then connect the first and last segments of the path:

To remove a segment from a path, we use the path.removeSegment(index) function and pass it the index of the segment we want to remove.

First, lets create a circle shaped path and inspect its segments:

As you can see, the path has 4 segments.

Now, lets remove the first segment of the path after creating it:

To remove an item completely from the project, we use item.remove():

var myCircle = new Path.Circle(new Point(100, 100), 50);
myCircle.fillColor = 'black';

myCircle.remove();