Which is better and why? RaphaelJS or HTML5 Canvas?

I found a vector library on the Internet that even works with IE6!


It's amazing.

Now my question is it better than the upcoming HTML5 <canvas>? The only reason I ask is that it could be years before Microsoft implements a <canvas> that doesn't require a plugin for it to run.

And it will be even longer until all the IE users on the Internet get rid of their old browsers so that we can even justify using the HTML5 <canvas>.

I'm all about sticking to standards, but this one is just going to take too long, thanks to MS's slow development of their browser.




Raphael is a vector graphics library, done using SVG, whereas HTML5 canvas is bitmap graphics.

If you want to do vector graphics, I think going with Raphael is probably a good choice over "just" canvas. As you say, canvas does not quite work with IE and it will probably be a while before it's natively supported. If Raphael does what you need, there is no particular reason not to use it.

Do note that there are also other libraries for this: Excanvas, which emulates canvas for IE using VML (as far as I know), and also some others which do the same with Silverlight and Flash but I forgot their names.

There's also Dojo, which has a component for abstracting canvas usage behind an easy to use interface, which also supports IE.

Having native canvas in all browsers will not make the libraries obsolete, since the libraries usually abstract some of the canvas complexities away, making the usage easier.


SVGWeb (http://code.google.com/p/svgweb/) by Google is what you want. It makes IE compatible with SVG, which is the standard, and which all other mainstream browsers already support. In other words, as google say, "Using the library plus native SVG support you can instantly target ~95% of the existing installed web base."


And you can use http://code.google.com/p/explorercanvas/ which implements the HTML5 Canvas Standard in IE. All you do is add:

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

The difference between Canvas and SVG is explained as follows:

SVG and canvas aren't really interchangeable technologies. SVG is a type of retained mode graphics where everything is drawn from a rather abstract model (the SVG document). Canvas on the other hand is a kind of immediate mode graphics, where there is no model and the client (JavaScript) must take care of redrawing, animations etc.


The answer depends on what you need:

  • if you need to add event handlers to the graphic objects: you need to use SVG. Else Canvas.

  • if no events are needed is performance important: if yes then Canvas 5.

Note that IE 9 supports Canvas and offers more HTML 5 support compare to other browsers!


was searching for "raphael vs canvas" the post here is 5 years old. Has something chaneged since then? Is raphael obsolet?


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.