There are many JavaScript frameworks that leverage HTML5.
Paper.js is one of these frameworks that uses Document Object Model (DOM) to structure objects in an easy-to-understand manner. It offers creative and neat ways of doing lots of stuff on a Web browser that supports the <canvas> tag. It also offers a new and interesting approach to drawing vector graphics.
The basic setup is shown below:
<script src="js/paper.js" type="text/javascript"></script>
<script src="js/main.js" type="text/paperscript"></script>
<canvas id="draw" width="100%" height="100%" resize="true"></canvas>As you can see, the paper.js is included after which you add your code file under “type=”text/….” After passing the canvas element id that needs to be drawn and ensuring that your code file includes all the classes and functionality to be used with paper.js, then the rest is a matter of being creative while you leave the rest to paper.js.
Working with Predefined Shapes
Paper.js allows you to use predefined shapes of varying dimensions and create path items and segments. For example, the code below produces circle-shaped paths from the “Circle” constructor:
var myCircle = new Path.Circle(new Point(300, 70), 50);
myCircle.fillColor = 'black';This piece of code creates a black circle with a radius of 50pts and at the x position of 300 and a y position of y.
To create a rectangle, you pass the “Rectangle” constructor the same way as a circle as shown below:
var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.selected = true;Creating Interaction
Paper.js also supports drag n drop functionality as well as keyboard strokes. An empty path is created on execution where segments can also be added as shown below:
// Create a new path once, when the script is executed:
var myPath = new Path();
myPath.strokeColor = 'black';
// This function is called whenever the user
// clicks the mouse in the view:
function onMouseDown(event) {
// If the path is empty, we need to add two segments
// to the path. The first one will stay put,
// and the second one will be moved while dragging.
if (myPath.segments.length == 0) {
myPath.add(event.point);
}
// Add a segment to the path at the position of the mouse:
myPath.add(event.point);
}
function onMouseDrag(event) {
// Move the last segment point of the path to the
// current position of the mouse:
myPath.lastSegment.point = event.point;
}The above code allows you draw straight lines by dragging and dropping.
Other mouse handler functions can be called by paper.js and trigger when certain events happen. Depending on what kind and level of interactivity you want to achieve, you incorporate mouse handler functions such as event.point, event.downpoint or event.pressure all of which can receive the different event objects about the mouse events.
Creating Animations
Paper.js creates animations by calling the “onFrame” handler. You define the function as shown below:
function onFrame(event) {
// Your animation code goes in here
}Examples of animations that can be created using the onFrame handler include rotating items, moving multiple items, color effects and animating path segments among others.
The code below creates and rotates a rectangle in the clockwise direction by 3 degrees:
// Create a rectangle shaped path with its top left point at
// {x: 75, y: 75} and a size of {width: 75, height: 75}
var topLeft = new Point(75, 75);
var size = new Size(75, 75);
var path = new Path.Rectangle(topLeft, size);
path.strokeColor = 'black';
function onFrame(event) {
// Each frame, rotate the path by 3 degrees:
path.rotate(3);
}You can download the paper.js prebuilt versions below:
