How To Draw Shapes with paper.js Javascript Library

Paper.js is a fabulous javascript library. Paper.js is mostly used for dealing with shapes, images, animations etc. on web pages . In this tutorial we’ll learn How to Draw Shapes with paper.js javascript Library.

 

SetUp paper.js

-Download latest version from here

-Make a new html page. And copy the file named ‘paper-full.min.js’ from downloaded package to same directory of new html page.

-Add these lines in body of html5 page. :

<canvas id=”canvas” resize></canvas>

</canvas>

<script type=”text/javascript” src=”paper-full.min.js” charset=”utf-8″></script>

<script type=”text/paperscript” canvas=”canvas”>

// your paper.js code here

</script>

 

Your html source will look like:

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas" resize></canvas>
</canvas>
<script type="text/javascript" src="paper-full.min.js" charset="utf-8"></script>
<script type="text/paperscript" canvas="canvas">
// your paper.js code here
</script>
</body>
</html>

 

Note: your web browser should support html5. mostly all new browsers supported, may test on : http://html5test.com

 

We are going to built shapes with use of path tool of paper.js

 

For initialize a new path:

var myShape = new Path();
myShape.strokeColor = 'blue';

Now we can add points (X, Y ) for draw a vector (line) with path.

myShape.add(new Point(100,10));
myShape.add(new Point(50,100));
myShape.add(new Point(150,100));

You can add different points for different shapes.

For make visible the Co-ordinates of points

myShape.fullySelected = true;

 

All code here :

<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="canvas" resize></canvas>
</canvas>
<script type="text/javascript" src="paper-full.min.js" charset="utf-8"></script>
<script type="text/paperscript" canvas="canvas">
var myShape = new Path();               // initialize  path
myShape.strokeColor = 'blue';
myShape.add(new Point(100,10));  // point at top
myShape.add(new Point(50,100));  // point at left
myShape.add(new Point(150,100)); // point at right]
myShape.add(new Point(100,10));  // point meet at top from right
myShape.add(new Point(250,10));
myShape.add(new Point(300,100));
myShape.add(new Point(50,100));   // meet at left
myShape.add(new Point(50,220));
myShape.add(new Point(300,220));  // down from left point
myShape.add(new Point(300,100));
myShape.add(new Point(150,100));  // return at right point
myShape.add(new Point(150,220));  // down
//myShape.closed = true;
myShape.fullySelected = true;
</script>
</body>
</html>

You Can Also Use predefined methods from paper.js for built Rectangle, Triangle, Circle, Ellipse etc.

e.g Traingle can be make by Path.RegularPolygon
var center = new Point(50, 50);
var sides = 3;
var radius = 50;
var triangle = new Path.RegularPolygon(center, sides, radius);
triangle.fillColor = 'blue';

Its all about How to Draw Shapes with paper.js manually. we’ll discuss about predefined methods Later.