jCanvas: jQuery Plugin for Canvas

One of the surprises in web development has been the slow rate of adoption of both Canvas and SVG. For example, among the nearly 23,000 plugins at users  can find only one plugin each  for Canvas and SVG. Contrast with the hundreds of plugins that use jQuery.   Yet both tools provide a wide range of  powerful graphics capabilities. Canvas has the added advantage that almost all of the browser vendors support most of Canvas in their HTML5 implementation – even IE.

So what slows up usage of Canvas and SVG? Well the syntax  for both can  get complicated very quickly. And doing simple operations like animations can prove vexing for even veteran users. Finally the code can be hard to understand  for some functions. Enter jCanvas, a jQuery powered plugin that simplifies Canvas programming while integrating well with native Canvas coding.

The Call for jCanvas

A client was looking to develop an animated logo to replace the Flash-based one that a)would not appear on any  Apples iOS set of mobile devices and even disappeared in Firefox and IE after the spate of Flash Player zero day security  problems from early this year. But it was not raw  HTML Canvas but rather jCanvas that the client decided on  based on jCanvas ease of use and  simplicity of animation while still offering  robust features. Below is a sample of the kind of logo design that was the starting step for a new logo:
[iframe width=”640″ height=”400″ src=”” allowfullscreen=”allowfullscreen” frameborder=”0″] This JSFiddle windows shows all the relevant code and results.

First, by pressing on the Results menu item one can see the the type of logo animation the customer was looking for. Then press on the JavaScript menu item to see the code used to create this animated logo. Just seven calls and the complete animation is done. And the properties used and set in the calls are easy to read and understand. Foe example, the setText() method places a string , “iMAGe”, on the canvas using a 72pt Verdana along with a4 other font settings.

Press the HTML to see the very simple canvas tag used as the logo drawing area. Press the CSS menuitem to see the simple CSS used – it is so simple – transfer into an internal style= statement in the canvas tag is warranted. Bang done in a couple of hours – and most of that was spent testing other jCanvas features in the convenient testing Sandbox that is linked to the jCanvas documentation:
Very convenient test environ for jCanvas code

Here is a vey nice feature of the jCanvas documentation. Click on the  the sample code and you are automatically taken over to the Sandbox where the code snippet can be editted and run to your hearts content. talk about a fast way to get up to speed in a JavaScript API.  And the jCanvas API is very robust as seen in the table below.

jCanvas Documentation Topics
jCanvas Control Styles Drawings
Introduction Clear Canvas Colors Arcs 
Syntax Translate Canvas Shadows Ellipses
Objects Rotate canvas Gradients Rectangles
Preferences Scale Canvas Patterns Lines
Extending Save Canvas Curves
Properties Restore Canvas Vectors
Layers Pixel Manipulation Graphs
Methods Get Canvas Image Text
Events Draw manually Images

Yes, this is not as complete as the Canvas API but it is a lot more approachable. And with jCanvas extensions, Canvas code and routines can be incorporated into user created jCanvas functions. That is what is shown in the Hearts Sandbox screenshote above – just click on the image to go to the Sandbox and try the code.


So here again we have an example of  jQuery making some web code a lot easier to use. jQuery itself makes DOM manipulations and hacks to get IE early versions  working properly a lot easier. Likewise, jCanvas makes Canvas programming a lot more approachable. This is much easier, safer, and more cross platform  than  Flash for simple logo and banner animations. But if you need the full power of Canvas integrated in – you can have that too. In sum, jCanvas is at the least a great intro to HTML5 Canvas – and still a great tool for doing graphics on the Web.

Pin It on Pinterest