Pestbarn

As we all perfectly know, designers are narcissists.

Archive for the tag “mobile support”

HTML5 Canvas vs Raphaël, what should I use?

During October last year, I had the opportunity to test out and experiment with a lot of HTML5 Canvas stuff. I were to design a super simple play/pause button for a voicemail player that had to work in as many browsers as possible, including mobile browsers. I was kind of new to the entire Canvas element, having never done anything with it before, so this was a great learning experience, and also a lot of fun! Here is a quick summary of the comparison between the native HTML Canvas object, and the javascript lib Raphaël.

See the code at jsFiddle

<canvas>

Advantages: No extra lib needed, PNG exports possible, wider version support in desktop FF, Chrome and Opera, and wider version support in native Android Browser.

Disadvantages: Isn’t supported in IE8, more complex than Raphaël.

Desktop support: Firefox 2.0+, Safari 3.1+, Chrome 4.0+, Opera 9.0+ and Internet Explorer 9.0+

Mobile support: iOS Safari 3.2+ (iPad, iPhone 3G, and up), Android Browser 2.1+ (Éclair and up), Chrome 18.0+, Firefox 15.0+, Blackberry Browser 7.0+, Opera Mobile 10.0+

canvas

Raphaël

Advantages: Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach javascript event handlers or modify them later.

Disadvantages: The lib is quite big (89 Kb, 31 Kb if Gzipped), no native Android Browser support for SVG in versions 2.1 (Éclair) to 2.3 (Gingerbread) – (needs a shim)

Desktop support: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Mobile support: iOS Safari 3.2+ (iPad, iPhone 3G and up), Android Browser 3.0+ (Honeycomb and up), Chrome 18.0+, Firefox 15.0+, Blackberry Browser 7.0+, Opera Mobile 10.0+

raphael

Annonser

Post Navigation

%d bloggare gillar detta: