Is it possible to have this canvas animation working in IE6~8 ?
Animation here: http://jsfiddle.net/calebo/4qMMy/
I have tried using these 2 plugins but it still won't work.
http://code.google.com/p/explorercanvas/
http://burzak.com/proj/fxcanvas/
The only way to get canvas to work in older versions of IE is to use some kind of hack.
Canvas was only implemented into IE9, so previous versions don't know anything about it.
There are a number of javascript hacks available which translate Canvas into a VML object for compatibility with IE6-8.
One example is here: http://code.google.com/p/explorercanvas/
Similar hacks exist for SVG, which can also be converted to VML for older IEs. eg http://code.google.com/p/svg2vml/
Please note, however, that no matter how clever these hacks are, you are likely to have some fairly fundamental speed issues with older versions of IE if you're doing anything clever with canvas. These hacks are written in Javascript and need to run in real-time on what is basically the slowest Javascript interpreter around. If you do any kind of complex graphics, the results will not be pretty.
To be honest, I've given up trying to get Canvas to work in older IEs.
The best success I've had with cross-browser dynamic graphics is using the Raphael library. This produces SVG in most browsers, and VML in older IEs, and seems to work well -- and more importantly, reasonably quickly, even in older IEs.
It isn't canvas, but it is cross-browser dynamic graphics, and at the end of the day the end user doesn't really care what you use to draw the graphics, as long as it looks good.
Explorer Canvas has always worked great for me. Did you make sure that you downloaded the latest JS file:
http://code.google.com/p/explorercanvas/downloads/list
and also included this tag at the top of your document:
<head>
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
</head>
Related
I'm using Raphael 2.1 to draw 15 lines at the same time. Each lines is made up of 50 2 pixel paths. Performance is best in Safari and Chrome, good in FF, weak in Opera, and chokes in IE9. Microsoft says that SVG will run in IE9, but Raphael.svg returns false in IE9.
I've been reading posts related Raphael and IE all day, and the only solution that I've seen for improving Raphael's performance in IE9 is to install Chrome Frame.
Has anyone encountered any other solutions?
Raphael uses svg in IE9 and work with reasonable performance. You have to be careful that IE is not being forced into IE8 standards mode (which frequently happens). If IE9 falls back to IE8 standards then it will end up using VML, which is very slow, and there is no efficient alternative to SVG in general in IE8 or below.
When faced with this problem using IE8 I ended up using divs and css to achieve rendering of lines, rectangles and text. Since that's all I required it was very fast even in IE8, helped out by buffering the divs inside the container. If your problem is simple enough, you may wish to consider a pure DOM solution. See: https://github.com/Matt-Esch/simpleCanvas.js for inspiration.
I'm well aware of the caveats of using HTML5 and still needing to support older browsers (read IE8 and lower)... You need to add the shiv or Modenizr or something like that to make your pretty little site respect the and tags.
I'm happy with this, but someone said to me the other day that they didn't use HTML5 tags because obviously you needed JS to make IE8 play nicely with these. And I've seen what happens with Modenizr not loaded (I do ocassionally play around with advanced JS and break it all, which stops Modenizr loading).
Now I personally think this is a bit of an unnecessary statement because the useshare for browsers IE8 and lower who have JS turned off probably represents 0.000001% of your user base (especially given this was told to me by someone who does not support or test for IE7 and lower).
But I am wondering what solutions are out there if you want to support HTML5 tags in non HTML5 browsers WITH JS turned off. Or is my above assumption pretty accurate and it's really not worth thinking about?
Sorry. There are no good solutions for using HTML5 tags in IE8 without using Javascript.
HTML5Shiv and Modernizr exploit the only known hack that can make IE recognise unknown tags in a way that is usable for a modern HTML5 website.
It is sort-of possible to do it by turning your entire document into xhtml and using a different namespace for the HTML5 tags -- see http://www.webstack.co.uk/html5_without_javascript_ie8/ for an example.
However, these techniques are not ideal, because IE has bugs with unknown tags that go beyond the basic one of being able to render them properly at all. There are several further bugs with them around areas such as dynamic content and printing that are dealt with by the HTML5Shiv hack, but not by the namespace hacks like this.
Bottom line: html5shiv is the answer. If you really need to support IE8 users who have Javascript disabled, consider not using HTML5 tags at all.
What are the main differences between raphael.js and paper.js?
Are there any other libs out there I should look at? Any like these that focus more on CSS3 then SVG?
Thanks!
Raphael uses SVG. Paper use Canvas.
That's the major difference.
In terms of what you can do with them, Canvas and SVG each have their own place, and are good for different things (although they are both capable of doing each other's thing as well if you ask them to). From a purely functional point of view, you need to consider what you want to do with the library before you decide which one you go with.
Browser compatibility is going to be a big issue, whichever one you use. This will possibly be a bigger issue than functionality, in fact.
Raphael has an advantage on the desktop because it detects older versions of IE (as far back as IE6) and falls back to using VML instead of SVG. This means it has excellent compatibility on virtualyl all desktop browsers. Canvas simply isn't supported on older IEs, and the Paper.js people don't really seem too worried about it.
But on mobiles, Paper.js may be better, because Canvas has much better support on mobiles than SVG. SVG isn't supported on most Android devices at all. This is changing: Android 3.0 introduced SVG support, but most Android devices being sold even now come with v2.x, so it'll be a while before you can rely on SVG working on a mobile.
For more info about browser support, see the CanIUse site:
CanIUse SVG
CanIUse Canvas
Hope that helps.
The most obvious difference is that Raphael targets SVG, and Paper targets the Canvas element. It also appears that Paper has far greater advanced features, whereas Raphael is just core SVG elements, which can then be expanded upon with plugins. Arguably, it depends more on your need, and which environments you wish to target. Canvas works well on some mobile browsers, SVG barely works on mobile environments at all.
As another side note: SVG, as I'm aware of it, is not hardware-accelerated in IE (9) or Firefox, and, again if my memory isn't failing me, Canvas is, at least in IE (9). As for IE 8 and below, you need a browser plugin, which most have, but it is a dependency to expect.
Are there any other libs out there I should look at?
Yes, you should have a look at processing.js!
And by the way - here is an excellent comparison between raphael.js, paper.js and processing.js:
http://coding.smashingmagazine.com/2012/02/22/web-drawing-throwdown-paper-processing-raphael/
And even code comparison of the same effect:
http://zgrossbart.github.com/3gears/
Are there any other libs out there I should look at?
If you have experience in Flash development you might consider easel.js which provides you with some of the flash display mechanisms. Easel looks like a really nice lib to me.
Another interesting library is processingjs, unlike the other libs processingjs also does 3d stuff. (It's also good at 2d.) Unlike paper, raphael and easel processing doesn't handle user interaction out of the box.
Both libraries use canvas.
I am using toDataURL() method of a canvas object. It works on IE9 and Chrome.
But it is not supporting for IE7 and IE8. I found this link
https://github.com/sampula/SVG.toDataURL/commit/9b59af148b7f14d41974cf318eed6f84c8c91062
It extends SVG to use toDataURL(). But in its implementation, it again uses canvas.toDataURL(). I am using Google's API (jquery.flot.js) for plotting all the graphs graphs. But it also uses canvas to plot the graph. So, SVG is not an option.
I there ever a way to use canvas.toDataURL() or something similar for IE7 and IE8.
Thanks in advance
IE7/8 does not support either Canvas or SVG.
It does however support VML, which is a vector language similar to SVG, and there are a number of javascript-based hacks for IE that use its VML functionality to emulate both Canvas and SVG in this older browser.
The most well known IE-Canvas hack is this one: http://code.google.com/p/explorercanvas/
I haven't spent much time with it myself, so I can't vouch for whether it can do specific functionality such as the toDataURL() method you're asking about, but if you can't do it with this, then it's unlikely to be possible at all.
I mentioned that there are similar tools for VML->SVG as well. If that's of interest to you, then you might want to look into this one: http://code.google.com/p/svg2vml/
Bear in mind that no matter how clever these hacks are, there is always a fundamental issue of performance. IE7/8's javascript interpreter is very slow by modern standards, and these are javascript-based tools trying to shoehorn very modern functionality into this old browser. They may well work, but don't try to do anything too clever with your canvas or SVG, or you'll kill the browser.
Finally, since you mentioned that you're using all this to draw graphs, I will point out the graphing module of the Raphael library. Raphael is a library which draws SVG graphics on all browsers (falling back to VML for IE). The graphing module provides all the usual graph types, wrapped in an extremely easy-to-use javascript API. And it is fully cross-browser compatible -- it works on all desktop browsers out of the box from the latest Chrome and Firefox all the way back to IE6. If you're struggling with cross-browser compatibility with the tools you're using now, you may want to switch to this library.
Hope that helps.
I have recently created an application in which I had to use toDataURL() but I was not able to find any way to do this in IE7/8. My application was an online image editor in which user was able to save the canvas contents. I believe there is not way we can use this method in IE7/8.
I found a vector library on the Internet that even works with IE6!
http://raphaeljs.com/index.html
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.
Thoughts?
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:
<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>
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!