Introduction to Paper.js

Paper.js is a JavaScript library that allows us to create vector graphics in the browser. It is a great API for drawing and manipulating graphics.

“Creative coding is not about mastering a tool or a technology, but about using code as a creative medium to express ideas and explore new forms of art.” - Casey Reas

In this tutorial, we will learn how to create a basic shapes using Paper.js. Paper.js is a JavaScript library that allows us to create vector graphics in the browser. It is based on the HTML5 Canvas element and provides a clean and simple API for drawing and manipulating graphics.

Getting started

To get started, we will need to create a new HTML file and include the Paper.js library. We will also need to create a canvas element, which will be used to draw our graphics. The canvas element is a part of the HTML5 specification and is used to draw graphics using the Canvas API. We will use Paper.js to draw our graphics, but we still need to create a canvas element to tell the browser where to draw the graphics.

Code block-0:

Next, we need to initialize Paper.js by calling the paper.setup() function. This function takes a single argument, which is the canvas element that we want to use to draw our graphics. We can get a reference to the canvas element using the document.getElementById() function.

Code block-1: We need to specify the canvas id and setup Paper.js

Creating a basic shape

Now that we have initialized Paper.js, we will start by creating a circle using the new Path.Circle() function. This function takes two arguments: the center point of the circle and the radius of the circle. We can create a point using the new Point() function. This function takes two arguments: the x and y coordinates of the point. We can then use the radius property to set the radius of the circle.

Code preview-0: Draw a basic circle

Creating a basic equilateral triangle

Let’s create a basic equilateral triangle. We will start by creating a new path using the new Path() function. We can then use the add() function to add points to the path. We can create a point using the new Point() function. This function takes two arguments: the x and y coordinates of the point. We can then use the closed = true to set triangle’s closed attribute as true to close the path to create a correct triangle.

Let’s write to code for this triangle:

Code preview-1: Creating a basic equilateral triangle

Creating a basic rectangle

Let’s create a rectangle and build over it.

Code preview-2: Creating a basic rectangle

Up until now, we have covered how to initialize Paper.js and how to draw a basic circle and triangle. In the next part, we will learn how to create a basic ornament using the circle and triangle that we have created.