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.
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
|jCanvas Documentation Topics
|Get Canvas Image
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.