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.