Draw with JavaScript and Export to SVG with Paper.js

4 min readDec 19, 2017

If you’ve ever wanted to do as the title says, check out the tutorial below. It’s based on Paper.js.

Paper.js is a scripting framework that runs on top of the HTML5 Canvas. It is based on Scriptographer, a scripting environment for Adobe Illustrator.

With Paper.js, we can build interactive vectors , or static ones.

Let’s take it for a spin by creating a simple node project called paper. You can use this code as reference.

From the terminal, make your project folder like this:

mkdir paper

Got to the project folder and install the module using npm:

cd paper
npm install paper

This should create a folder called node_modules, which will contain the paper folder.

Now let’s create an index.html file on which to write our code:

touch index.html

Paste this code as the content of index.html and let’s talk about how it works:

<html>
 <head>
  <script type="text/javascript" src="node_modules/paper/dist/paper-full.min.js"></script>
  <script type="text/paperscript" canvas="myCanvas">
   var path = new Path();
   path.strokeColor = 'black';
   var start = new Point(100, 100);
   path.moveTo(start);
   path.lineTo(start + [ 100, -50 ]);
  </script>
 </head><body>
  <canvas id="myCanvas" resize></canvas>
 </body>
</html>

Draw with JavaScript and Export to SVG with Paper.js

Written by Ivan Sifrim