A Look at two HTML5 Canvas libraries – JCanvaScript vs Processing.js

Jan 16, 2012

processing.js for canvasI have recently made a start on a website that requires a more graphical interface than you would ordinarily be able to produce without the use of flash. Thankfully the rise of HTML5 and it’s associated specifications and technologies now gives me the option of using the far more palatable (not to mention iPad compatible) option of the Canvas element. While there is always the option to work directly with this kind of graphical library, such as the GDI in old windows programming or the newer canvas HTML element it is generally better practice to sit your application on top of a higher level framework. After looking around at my options I found two that really interested me and am going to go through a quick description of each and compare how they can be used in different situations. These two frameworks are processing.js and JCanvaScript. I chose these two libraries to look at due to specific features I will discuss in a moment but there are many other frameworks to look at that may meet your needs better, take a look for yourself.

  • Raphaël—JavaScript Library
  • xc.js is a framework for HTML Canvas games in Javascript
  • [CAKE is a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off.][4]

HTML Canvas Basics

The HTML Canvas element essentially allows you to draw a bitmap image dynamically using JavaScript. You do this by drawing graphics primitives, such as lines, on the canvas – which retains these elements until it is cleared. In order to achieve something useful for a GUI you need some kind of state management and/or rendering loop. These two concepts are essentially where JCanvaScript and Processing.js differ. Processing provides a function that is called over and over again, according ot the frame-rate and the developer adds code to it to draw each frame. JCanvaScript takes the state management route by providing the developer with a “Scene Graph” whereby they are able to add, move and remove elements and the drawing of these elements across frames is handled automatically.

Render Loop v Scene Graph

So what are the advantages of these two approaches? Well a render loop is generally simpler but also less restrictive, while a scene graph does more of the work for you – especially if tailored to specifically what you are doing e.g. a web UI or a game. A render loop is very well suited to animation, and especially to dynamically created effects such as fireworks, flame or particle effects. A look over the Processing.js examples show plenty of this kind of thing – often they are more about animation than they are about UI but that isn’t always the case. A render loop still gives you the tools to track and react to user feedback, although a scene graph can do more of this for you – so it really comes down to exactly what you are tracking. A render loop fits well with a page that draws elements to the canvas based on the user moving the mouse around the screen, while a scene graph might be a better option for a page that handles user interaction with discrete elements that have been drawn (such as buttons) and can even manage things like double clicks.


Processing was originally developed as a tool for creating dynamic graphics using the Java programming language and it works brilliantly well for this – and allows less technical people to code up elaborate and beautiful animations. Your animation is defined in a slightly more declarative way than many rendering loops normally would and this isolates the developer from much of the detail. It has since been ported to JavaScript and can be implemented either as an external JavaScript file containing an “animation”, or as native JavaScript. You get all of the drawing functions you could ever want,

What the Processing.js website has to say about itself.

Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It’s not magic, but almost.



JCanvaScript is a much more object oriented approach to abstracting the Canvas element. What it offers that really attracted my attention was the ability to bind to user interaction events such as clicks and double clicks on specific drawing primitives that I have added – thus dealing with the hit detection for me.

The library as a whole is very object oriented and allows you to keep references to specific primitives that you draw on the canvas, react to user clicks etc. So far I have found it very easy to use. It clearly lacks the depth of support and the community that prototype offers but all round a very good start.

And an extract from the JCanvaScript website.

jCanvaScript is a javasript library that provides you methods to manage with the content of a HTML5 canvas element easily. It runs on any platform (including iPhone, iPad, Android) that supports canvas and JavaScript.

  • Fully Object Oriented
  • Provides access to the canvas context
  • Provides mouse-events to all objects
  • Provides keyboard-events to all objects
  • Provides drag’n’drop
  • Easy methods to manage objects
  • Provides easy objects animation

In Conclusion

Both these libraries are really good but it depends on what you are trying to do. For animation and art or computer generated content I would recommend processing.js but for user interface development then JCanvaScript might be the way to go.

[4]: http://code.google.com/p/cakejs/