javascript

How To Draw Shapes with paper.js Javascript Library

Harman Singh

Harman Singh

— 1 min read

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. :

 

Your html source will look like:

 

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 :

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.

Read more