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 WordPress.org 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=”http://jsfiddle.net/9Sacs/5/embedded/” 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 | |
| Polygons | |||
| Maskings | |||
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.
Summary
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.