Our Blog

The HTML5 canvas, without tears

Posted by
30 June 2011
1 comment

The HTML5 canvas turns web pages into games consoles, renders Flash practically useless and archaic and leaves web developers with goosebumps, both in excitement and in fear. Because face it, canvas programming is low-level stuff (devspeak for: here lurks tigers).

And exactly that is why every attempt at taming the wild wilderness hiding in the blank canvas is met with ample shoulder-carrying by ululating tribes of eager developers.

HTML5 Canvas with Paper.js

This type of programming environment, where doing fairly basic stuff requires you to write a fair amount of repetitive code and where every line of code requires you to desperately draw pictures and scribble calculations in an attempt to try and visualize what exactly is going to be drawn on the canvas – this is the ideal breeding ground for frameworks and utility libraries.

And that’s where Paper.js steps in. Quite successfully, I might add.

Paper.js is not just a utility library. It is actually an entire document object model for vector graphics.

What does this mean?

Similar to the way html has defined document objects, which define common behaviours for text, Paper.js has defined sets of objects that simplify working with vector graphics, especially if you’re used to working in a typical vector graphics editor like Adobe Illustrator.

Animation is built on top of this in a very simple way by providing a hook into the frame renderer in the form of a user-definable function that executes every time a frame is rendered.

In normal language this means that every time Paper.js draws a frame in the canvas, it gives the programmer the ability to tell it what to draw.
The actual drawing of the frame is not triggered or controlled by the programmer; Paper.js just keeps drawing frames as fast as possible, executing the right functions at the right time.

User interaction is done in the same way. The programmer has the ability to define pieces of code that get executed when the mouse is clicked, the mouse is moved, a key is pressed on the keyboard, etc.

At this point, I could go into more detail about using Paper.js and it will all become very technical. But that’s not really necessary, because the Paper.js tutorials are simply brilliant and very concise.

If you’re at all so inclined, dive in and start playing – that’s where I’m going to be for the next week!

Posted by

1 Trackback

Leave a Comment

Your email is never shared. Required fields are marked *