Khalsa Labs

How To Draw Shapes with paper.js Javascript Library

Paper.js is a fabulous javascript library. Paper.js is mostly used for deal 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.

The following two tabs change content below.
Python Developer and DIY lover.

want to comment ??

Your email address will not be published. Required fields are marked *