In the on going battle to make my lunch time more optimised I decided to learn some Javascript, and how to use the HTML5 Canvas element. Turns out it’s not that hard, and I have now created
The Lunch Wheel]3. It helps me find lunch close to my office in the Courthouse area of Arlington, VA.
While making this I found that information on the Canvas element seemed to be lacking. For example, not many sites talked about ways to optimise or profile the javascript. Also I was disappointed to see that not all browsers supported the Canvas completely. Here is a quick list of the problems:
-
Firefox 3.5 (linux) doubled the size of the fonts when I was setting the font in “pt”. When I switched to “em” things seemed to work consistently across browsers. 30fps
-
Android 2.2 (Droid 2) works well but slowly. It also didn’t support the Audio tag. 6fps
-
Android 3.0 (Xoom Tablet) seemed to have some issues rendering half of the wheel. It looked like a bug with the hardware acceleration. I made some minor tweaks to the rendering and things started to work. 15fps
-
iPhone 3 didn’t render any of the text, but played the sound and spun the wheel. 3fps
-
iPhone 4 rendered fine but as slowly as the Android 2.2 device. 5fps
-
Chrome (linux) worked great, and was the platform I was developing on. 30fps (max)
I was also using the clip() method to ensure the text didn’t go outside of the wheel, but this heavily impacted performance. So instead I just chopped the text manually and performance doubled.
I realise HTML5 is new, but I’m really hoping all browsers will start to support it consistently and across the board. I’d hate to start writing large blocks of code to cope with all the browser quirks.
Also, thanks to jQuery, TinySort and ExplorerCanvas (which I still haven’t made work).
Update: Soon to come, the ability to find your own lunch places, as well as integration with foursquare so you can see how popular the venues are with your friends.