Paper.js aims to simplify the html5 <canvas> element, and does a really good job of it. The <canvas> element is arguably the most powerful new feature of html5, but it’s not without its problems. It lacks a straightforward drawing instruction set. Rather than laying out vector art in a simple notation, developers are forced to draw out artwork through a long series of JavaScript functions. Paper.js wraps these functions into a much more intuitive framework.
Paper.js has an impressive set of features. It begins by wrapping all of the canvas drawing commands into simple objects such as Rectangle
, Circle
, Arc
, and even Star
. All objects have a common set of properties that are easy to manipulate. Animating a shape across the screen is as simple as changing its position
property. A Group
object combines many simple shapes into complex artwork which can be manipulated as one.
More advanced features of Paper.js include event handling, shape debugging and collision detection. This brings it into the realm of game development. For decades Flash has been the dominant web-based gaming platform. There are many reasons to look at html5 for game development <cough>iOS</cough>. <canvas> has much of the capability of Flash and paper.js brings this out in a programming style very similar to Flash ActionScript.
Using one of the provided demos as a starting point, I was able to create this interactive flying saucer animation in less than an hour.