jQuery Canvas Kit

The future of the web, simplified

What is the jQuery Canvas Kit?

The jQuery Canvas Kit (JCK for short) is a toolkit designed to extend the capabilities of the HTML 5 Canvas element. It provides a streamlined solution for a number of common needs, such as a run loop, live performance analysis, the ability to utilize the entire content area of the browser for the canvas (with dynamic resizing), and much more.

The JCK is geared for performance and ease of implementation. To extend any canvas on the document, simply pass the canvas as an object into the jck() function:

jck(document.getElementById("myCanvas"));

If myCanvas is the ID of one of the canvas elements in the document.

 

So, what does it do for me?

One of the core functions of the JCK is run loop and frame management. Using this toolkit, you will no longer have to worry about callbacks and clearing of the canvas - it's all taken care of for you.

In this example, the looping functionality is being managed completely by the JCK. The core logic of the demonstration deals with the animation of the little teal balls, not with tedious frame management and callbacks.

 

Live performance metrics.

The JCK provides a profiler, a tool that will help you determine how well your application is performing. While the browser tries it's best to achieve a certain framerate, there are sometimes circumstances that prevent this. By outputting how many frames are actually being rendered per second, you can easily identify where CPU utilization may be too high. The profiler is also extensible; you can have it keep track of propreties specific to your application. To see it in action, start the demo above by clicking "Play/pause" and then click "Toggle profiler" to see its actual framerate. "Dusts" is a custom value that was added using the JCK API.

The JCK is being actively developed. More technical documentation can be found on the Google Code wiki.

 

It's also a game platform.

The JCK is geared towards providing a general platform for interactive applications, but it also serves well as a game platform. It's not a game engine, so it doesn't bog developers down with functionality they might not need. However, for developers wanting a simple run loop - a clean slate - it's an ideal choice.

Here's an example of a game built using the JCK.

 

• Download the latest version
• View the source, wiki, and issue tracker on Google Code
• The jQuery Canvas Kit is a free and open source project by Jeremy Kahn. All are welcomed to contribute and distribute.