Draw with JavaScript and Export to SVG with Paper.js
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>