Until now, vector graphics on HTML5 pages meant using SVG directly or with a library abstraction, or rolling you rown utilities. Paper.js, a new library for drawing vector graphics on the HTML5 canvas, has introduced a simple, powerful API, and the examples are stunning.

From the project’s about page:

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

The Paper.js API is very clean. The class structure is what you’d expect from a seasoned vector graphics library: Path, Point, Layer and Color classes exist and have the methods and properties that you would expect.

You might even notice that using the API feels very much like using a vector illustration application, such as Adobe Illustrator. Tthis is because Paper.js is based off of Scriptographer, a scripting plugin for Illustrator. A clean API is refreshing — Raphaël, a different JavaScript vector graphics library, bases its API off of abstracting SVG objects and is often confusing.

For example, here’s the code to create a simple rotating square, which is quite simple and shows Paper.js’s built in event loop:

// 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);
}

Paper.js draws using the canvas element, not SVG, and uses the experimental requestAnimationFrame browser feature if available. Adding stats.js to the examples showed a frame rate of around 30 FPS on a recent 1440×900 MacBook Pro with Chrome 13. Performance degraded quickly, however, as more moving elements were added, such as in Bouncing Balls demo.

 

Paper.js is released under the MIT License, though the author asks for donations if you use the library frequently or for commercial purposes.

See: Paper.js

Tagged with:
 
About The Author

Ian

Ian Langworth has been making web sites since before HTML had tables and Photoshop had layers. He wanted a single place to go for news and information related specifically to HTML5 and game development, but one didn't exist, so he started the HTML5 Grind.

Comments are closed.