I found that excanvas and flashcanvas are the common libraries used for supporting canvas features in Internet Explorer( below 9). But both of them doesn't have implemented all the specification features of canvas.
For example the drawImage() function only accepts image as the source. It does not support either canvas or video. Also there is no implementation available for getImageData(),putImageData()
Which is the best and correct JavaScript library for supporting canvas features in IE browsers? Do we get any other library for IE which exactly mimics the native canvas features?
FlashCanvas Pro support getImageData() and putImageData():
http://flashcanvas.net/docs/canvas-api
but I suggest you to don't try to use canvas on ie<=9
If you need to works with graphics, you can use http://raphaeljs.com/ , it use SVG for modern browsers an VML for ie 6-8
Have you heard about DOM SPRITRES
There is no way to get full canvas support for old IE browsers (IE6 - IE8)
Javascript engine performance is not good enough for emulating all native <canvas> operations
External plug-ins, like Flash, are limited how they can interact with page elements like <img> or other <canvas>
Solutions
Google Chrome Frame provides single click, no admin priviledges needed, plugin which will make older Internet Explorers to use Google Chrome rendering engine when the page requests so. It will turn Internet Explorer Chrome internally and the user doesn't see the difference. The downside is single click plugin install and download time.
Don't support old browsers
Do not use <canvas> if you need to support old browsers
Use <canvas> emulation feature set which works in all browser - this is the most painful solution and I suggest you simply don't try to do it, because sooner or later you'll encounter something that doesn't work in <canvas> emulators
Related
Could a developer with experience of D3.JS indicate what specific browsers and browser version levels in practice most readily support the D3.JS library ?
Is there a list of D3.JS 'components' which are known not to be compatible with specific browsers and browser version levels?
The D3.JS website suggests :
Browser Support
D3 supports so-called “modern” browsers, which generally means everything except IE8 and below. D3 is tested against Firefox, Chrome (Chromium), Safari (WebKit), Opera and IE9. Parts of D3 may work in older browsers, as the core D3 library has minimal requirements: JavaScript and the W3C DOM API. For IE8, the compatibility library Aight is recommended. D3 uses the Selectors API Level 1, but you can preload Sizzle for compatibility. You'll need a modern browser to use SVG and CSS3 Transitions. D3 is not a compatibility layer, so if your browser doesn't support standards, you're out of luck. Sorry!"
However, I was hoping for a more specific answer.
I'm going to go out on a limb here and equate SVG support with D3 support, since (in my opinion) that's the most useful part of the library.
With that in mind, this link should give you the exact browser versions that support it:
http://caniuse.com/svg
And this matches what you pasted from the D3 site: basically every major browser vendor except IE has had SVG support for many many versions.
Your question says "in practice" and that means SVG. Yes, I know there are some samples of using D3 with the non-SVG parts of the DOM, but the vast majority of the examples in the gallery are SVG-based.
D3 is a library for data manipulations with a lot of helper tools for data visualizations using SVG and Canvas.
D3 is designed to give you direct access to all underlying features of HTML and SVG. This means, cross-browser compatibility is limited by the elements and attributes your code uses rather than D3 itself.
Here are some examples for HTML5 and CSS3:
// Requires HTML5
d3.select('body').append('nav');
// Requires CSS3 transformations
d3.select('div').style('transform', 'matrix(1, -0.3, 0, 1, 0, 0)');
and one for SVG and SMIL:
// Requires SMIL
d3.select('rect').append('animate')
.attr('attributeName', 'x')
.attr('from', 10)
.attr('to', 50);
and one for Canvas:
// Requires Canvas
d3.select('body').append('canvas');
If we consider only the D3 framework itself (for example to use only the geo projection functions, but no DOM elements etc.), cross-browser compatibility is limited by the browser support of ECMAScript 5 due to the heavy use of map, forEach, etc.
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.
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>
Is there a javascript solution to make the canvas tag or the video tag in HTML5 behave more like HTML5 in older/current browsers that don't support it?
The canvas tag should ideally behave like the it would in HTML5 supportive browsers, but the video tag is also good if it's replaced with alternate code.
You can use the canvas in Internet Explorer using this library. There is also this library for doing the same with HTML 5 in general and this one for drawing text on a canvas. Here is a canvas library for GWT (which of course gets compiled to javascript).
Edit: Here is a library to add svg support to older browsers.
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!