How to Create a Super Simple Drawing Tool with Paper.JS

What Are We Going to Make?

In this tutorial I will guide you through using Paper.js to create a super simple line drawing tool! The finished app will allow users to create unique line drawings with the ability to change line widths and change the line color to red. This is meant as an introduction to Paper.js so is very simple, but you could easily build on this to create a more complex tool.

What Is Paper.js?

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Ready, Set, Download Your Dependencies

We will require Paper.js files for this tutorial, either visit their website or click this link to download the latest stable release version of the library. Next we should create two folders – one for our js and one for our css. We will be using very minimal CSS for this tutorial and I have just used the stylesheet from the packaged Paper.js zip file for the purposes of this tutorial with a few minor changes. This is below. You want to put paper.full.min.js into your js folder as this is the Paper.js library which will produce our vector line art magic. It is in the dist folder of the packaged library files. You can also use npm to download the files but its up to you.

CSS

Create a HTML File and Lets Draw Some Lines

Ok, now onto the fun part –  first we want to create a bog standard HTML file with a canvas element on it which is where the user will be able to draw shapes via Paper.js. We define our HTML, add the dependencies and write some simple descriptive text about what the tool is about with instructions as well as creating the canvas element at the bottom.

Lets Draw!

Ok, let’s make Paper.js do something now, write the following below the script ref to the minified paper.

If you now reload your HTML page in your browser you should now see a line appearing whenever you hold down the mouse creating a line drawing. In the js above we are loading a new variable called myPath, defining it with type Path() in the onMouseDown function which is detecting for the ‘mousedown‘ event. For example the user clicking their mouse down, and then creating a new stroke with black color and width of 5. OnMouseDrag then tracks the users dragging movements and adds a new point creating the lines on the canvas.

You should now be able to draw something like this

So this is cool, but next lets build on it a bit shall we?

Different Line Widths and Color Change
Let’s add some options to enhance this tool and support different line widths and a color change

We have a very simple line drawing tool now, but to add some more variety we will add a few listeners for keyboard commands to variate the widths and to change the line color to red when users press the spacebar. The code below shows how.

And that’s it! You have your own super simple browser based drawing tool!

The full HTML is below.

Click HERE to download the project source code.

Related Posts