Touch of Canvas, and Firebug Profiling

These days, I work on Canvas Animation with JSTweener to make an animation by JavaScript. Now you can see it on the new home page of my site. Check it out and give me some comments, please.

So in this entry, I’d like to give a brief introduction of Canvas and how to do profiling in JavaScript with Firebug.

Canvas

Canvas is a (relatively) new HTML Element where you can draw pixels by JavaScript, originally developed by Apple, and adopted in Web Standard as HTML5. It has a nice set of drawing APIs, similar to Processing drawing APIs. The way it handles transformation looks more similar to Processing/OpenGL style.. Like to push translated matrix you can call context.save(), and to pop it context.restore(), stuff like that.

There seems to be no comprehensive Canvas 2D APIs yet online in English, it may be bacuase it’s still ongoing implementation, and there’s slightly difference to each browser… So I just list up some links that I used.

• HTML5: Specification of Canvas tag
• Apple ADC: A list of methods you can use Webkit
• Apple ADC: Using Canvas
• Opera: Canvas support in Opera 9.5
• Mozilla MDC: Canvas
• HTML5.jp: Canvas Reference (this site is the best comprehensive one, but written in Japanese. Learn Japanese! ;P)

And, as defacto standards, Internet Explorer doesn’t support Canvas yet. But wait! Canvas is not yet useless because of that! Google released a JavaScript library called explorercanvas. It has several of disadvantage, but it’s still good enough to offer the way to handle it. I’m wishing both Microsoft will make it happen and other Open source people will make explorercanvas better in future..

Animation and Profiling

Because I wanna do some animation on Canvas, I need 1) an animation engine and 2) massive optimization for speed. jQuery has easing plugin and seems to be available already in the core release, but… Hmm.. I just don’t feel like touching by glimpse at its document. Maybe next time.

I used JSTWeener for this time, which is a ported version of ActionsScript’s Tweener, originally developed by Zeh, and ported by Yuichi. Yet JS version doesn’t have some functionalities such as…Tweener.removeTweens() equivalent, still it has an advantage of ease of use as Tweener does, and it is stable.

Then I wrote some functions to draw vectors and image on canvas. I re-realized that my development machine is relatively faster than average ones! It doesn’t do animation on other machines.

Profiling really helps in that situation. And luckily, Firebug has a profile functionality. Just call console.profile("arbitrary title") to start, console.profileEnd() to finish profiling. The first picture is the result of profiler, it shows in Firebug console, you can change sort keys, and sort order.

It works pretty well in Firefox 3 + Firebug 1.2 (both latest version at this time).

But in some environment, it does NOT seem to work. I couldn’t run profier in Windows XP + Firefox 2 + Firebug 1.2 on VMWare. I found a discussion Problem using console.profile, and the author(?) says that you need to call loadFirebugConsole() before hand. It enabled me to call console.profile(), but afterwards I still could not stop profiling.. So I just installed Firebug 1.3 beta and it works although it gave me lots of crashes eventually.