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+
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+
