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
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
font-family: fantasy;
}
h2, p{
text-align: center;
}
a{
text-decoration: none;
color:red;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 100%;
height: 100%;
border:solid 1px black;
}
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Super Simple Drawing Tool with Paper JS</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/paper-full.min.js"></script>
</head>
<body>
<h2>Super Simple Drawing Tool with Paper JS by <a href ="http://www.chrisgodber.co.uk">Chris Godber</a></h2>
<p>Click and move your mouse to draw a line - press 1 ,2 and 3 to change the size, spacebar to change color to red</p>
<p>Have Fun!</p>
<canvas id="canvas" resize></canvas>
</body>
</html>
Lets Draw!
Ok, let’s make Paper.js do something now, write the following below the script ref to the minified paper.
<script type="text/paperscript" canvas="canvas">
var myPath;
function onMouseDown(event) {
myPath = new Path();
myPath.strokeColor = 'black';
myPath.strokeWidth =5;
}
function onMouseDrag(event) {
myPath.add(event.point);
}
</script>
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.
So this is cool, but next lets build on it a bit shall we?
Different Line Widths and 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.
tool.onKeyDown = function(event) {
if (event.key == '1') {
// Scale the path to 10:
myPath.strokeWidth = 10;
// Prevent the key event from bubbling
return false;
}
if (event.key == '2') {
// Scale the path to 15:
myPath.strokeWidth = 15;
// Prevent the key event from bubbling
return false;
}
if (event.key == '3') {
// Scale the path to 30:
myPath.strokeWidth = 30;
// Prevent the key event from bubbling
return false;
}
if (event.key == 'space') {
// change the stroke color to red:
myPath.strokeColor = 'red';
// Prevent the key event from bubbling
return false;
}
And that’s it! You have your own super simple browser based drawing tool!
The full HTML is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Super Simple Drawing Tool with Paper JS</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="canvas">
var myPath;
function onMouseDown(event) {
myPath = new Path();
myPath.strokeColor = 'black';
myPath.strokeWidth =5;
}
function onMouseDrag(event) {
myPath.add(event.point);
}
tool.onKeyDown = function(event) {
if (event.key == '1') {
// Scale the path to 10
myPath.strokeWidth = 10;
// Prevent the key event from bubbling
return false;
}
if (event.key == '2') {
// Scale the path to 15
myPath.strokeWidth = 15;
// Prevent the key event from bubbling
return false;
}
if (event.key == '3') {
// Scale the path to 30
myPath.strokeWidth = 30;
// Prevent the key event from bubbling
return false;
}
if (event.key == 'space') {
// change the stroke color to red:
myPath.strokeColor = 'red';
// Prevent the key event from bubbling
return false;
}
}
</script>
</head>
<body>
<h2>Super Simple Drawing Tool with Paper JS by <a href ="http://www.chrisgodber.co.uk">Chris Godber</a></h2>
<p>Click and move your mouse to draw a line - press 1 ,2 and 3 to change the size, spacebar to change color to red</p>
<p>Have Fun!</p>
<canvas id="canvas" resize></canvas>
</body>
</html>
Click HERE to download the project source code.
