HTML5 Canvas: Lunch Wheel

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
. 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:

1) 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

2) Android 2.2 (Droid 2) works well but slowly. It also didn’t support the Audio tag. 6fps

3) 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

4) iPhone 3 didn’t render any of the text, but played the sound and spun the wheel. 3fps

5) iPhone 4 rendered fine but as slowly as the Android 2.2 device. 5fps

6) 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.

Be Sociable, Share!

12 Comments

  1. Matthew Faulkner

    I get around 10 FPS on my transformer.

  2. Ian

    Dude this is brilliant (although currently not working), reckon you should whack it on github…

  3. Thanks Ian. I went ahead and fixed it. Also, the code is all there in the HTML, so no need to Github it. I could put it as a gist perhaps, or even better on on jsFiddle: http://jsfiddle.net/bramp/94jP6/

  4. Haha brilliant. It need customising to to Salford and a bit of design adding!

  5. babblu

    Is there any way to make the wheel to start rotating and stop at a item which is already selected by a random draw.

    For ex : i ve selected “five guys” by randomly first. then make the wheel to spin and stop at “five guys” exactly.

    Is it possible with this spin wheel? if so wat part of code need to be changed?

  6. mig

    Hi. Nice work.
    I can’t get it to run in IE 9. It seems to be a problem with explorer canvas. Any thoughts on that?

  7. Sunil Verma

    How can i stop this wheel on a pre defined value…..???????

    • bramp

      No, it’s meant to be random.

  8. Daniel

    This works in IE10 by changing the IE compatibility to standard and changing UA string to Mozilla/Safari/Chrome (F12 > Tools > Change user agent string).

    Would be nice, if you guys avoid browser sniffing and use feature detection instead for IE and remove IE7 compatibility meta tag.

    eg.

    functionisCanvasSupported()
    {
    var elem = document.createElement('canvas');
    return!!(elem.getContext && elem.getContext('2d');
    }

    Source: http://msdn.microsoft.com/en-us/magazine/hh475813.aspx

    • bramp

      Thanks for the info Daniel. I’m not doing any kind of browser sniffing, but perhaps one of the libraries I’m using is. I am using excanvas.js which will add Canvas support to IE, so that might be tripping it up.

  9. Fran

    Hi, this looks great, but I can’t make it work. I just want to download the code and change the options in the wheel and make it work locally. I try with the option “Save as”, and with copy/paste the content in “Elements” tag in Chrome DevTools (F12), but I didn’t get lucky. Please help! Thanks!

Leave Your Comment

Your email will not be published or shared. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>