JavaScript Graphics Libraries

Last year I was evaluating options for JavaScript graphics libraries for ColdFusion Builder ORM extension. The extension lets you select tables from a datasource and displays it in a browser window. You can them configure relationships, table fields, data types etc and generate CFC code. Here is the screen shot of that extension.

I evaluated SVG and Canvas for graphics/drawing in this extension. However Canvas was not supported in Internet Explorer at that time. SVG was supported on all desktop browsers, but Android browser at that time did support SVG (Android version was 2.2 then) . Since this application was meant to be used on desktop, I decided to go with SVG. Fortunately I came across a very good SVG JavaScript library, RaphaelJS, which made drawing and manipulating shapes in the web page a lot easier. I used JQuery + RaphaelJS together in my application. I used these two libraries for my another extension to monitor CF server memory.

Other than Canvas not being supported at that time in IE, another reason I did not use Canvas for my ORM extension was that Canvas is suitable for raster graphics, where you may want to control properties of each pixel. With RaphaelJS, the shapes that you create become part of the DOM and you can apply CSS attributes to them and add event handlers just like any other elements of the DOM, like button, text boxes etc. For example, to draw a (relationship) connector between tables, I have code something like –

var pathStr = "M" + x1 + "" + y1 + " L" + x2 + "" + y2; //M is for move and L is for line

var.connector = canvas.path(pathStr); //canvas here is RaphaelJS object, not HTML5 Canvas

$(connector.node).dblclick(onDBClick) //onDBClick is event handler function

Here is a good article,SVG or Canvas? Choosing between the two, comparing SVG and Canvas.

I have been working on a mobile application where users can draw strokes, shapes, insert images and move them. A couple of months back I was evaluating SVG Vs Canvas again, for this application. Now Android also supports SVG (from version 3), but because I wanted this application to run on older version of Android too, I decided to go with Canvas. By the way, if you want to know which features of HTML5 are supported on different browsers, visit ‘When Can I use‘ site e.g. you can find which browsers support Canvas here .

For the above Canvas application, I did most of the drawing using basic Canvas APIs. But recently I found a JS library for Canvas, KineticJS, which would have made my job easier. Like RaphaelJS, KineticJS also lets you draw shapes, images, add event listeners, scale, transform etc. It also allows you to group different shapes and perform operations on them as one entity. If you are developing a game then one feature of KineticJS that you would find useful is ‘hit test’, which lets you find if a given point lies in shapes you have created. I think I would use KineticJS for all my future projects that requires 2D graphics on Canvas.

If you want to do 3D graphics in the browser, then you should consider three.js. Three.js uses WebGL, which is currently not supported in many browsers. See the support table here.

Finally, though not strictly related to JavaScript graphics, I want to share some information about game development. This week I was looking for information on creating 3D games and came across following two very interesting articles – 1. Ray-Casting Tutorial … by F.Permadi and 2. Creating pseudo 3D games with HTML 5 canvas and raycasting. In fact the first article is referenced in the second article. Someday I would like to create a 3D game …

– Ram Kulkarni