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.
Related
I have an SVG with some basic javascript interactivity, and I would love to be able to put some audio into it as well.
To clarify:
This is for an SVG that is by itself, not inlined in HTML
I would prefer to avoid having to use a javascript library, but i can if it's necessary.
Any insight on how this could be accomplished?
There are SVG <audio> and <video> element tags defined in SVG 1.2 Tiny. Opera supports them but no other UA does as yet.
A solution that will work most places except IE 9/10 would be to use a <foreignObject> element with an html <audio> element as a child.
I don't think there's a good answer if you need IE9/10 support as it doesn't support <foreignObject>
If you require a browser with support for HTML5 audio, then it's possible to just put the audio elements in the svg (use the XHTML namespace for the audio element and its children). Last time I tried it didn't require a foreignObject wrapper. Here's an example showing how to do that (works in chrome, firefox and opera).
It's also possible to create HTML5 audio elements with javascript and use them inside the SVG.
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
What cross-browser JavaScript SVG library will allow me to display and interact with pre-made SVG images.
I know of these libraries:
Raphaël: I'm currently using this along with a SVG loading plugin. But that plugin does not support Inkscape or Adobe Illustrator SVGs (i.e. most SVGs).
cang: This library looks promising, but it requires <canvas> support, which IE doesn't have natively.
svgweb: Another more-promising library. It requires Flash, but most IE users have Flash.
jQuery SVG: It seems to be able to load SVG images, but development seems to have died. And it requires me to use a modified version of jQuery 1.3.
I'm basically trying to make chunks of arbitrary images "selectable".
Any help would be greatly appreciated.
Raphaël does support importing of Illustrator SVGs, through the use of this great plugin. All you have to do is save your ai file as an SVG, open it up using a text editor, copy out the code and import it with the plugin. Works great, except : only supports "path" objects, no text, no gradients, no shadows...
I'm using http://excanvas.sourceforge.net/ for Canvas support in IE and Cang for SVG suport using Canvas.
What you could do is use a combo of cang and svgweb, you could check to see if the browser allows canvases, and if so, load cang and use it. Otherwise check if they have flash, and if so, use svgweb. If they have neither, then tell them to upgrade their browser.
You could read http://ejohn.org/blog/future-proofing-javascript-libraries/ if you are unsure about javascript feature detection.
I'd be tempted to make use of Google Chrome Frame (an IE plug-in). This will save you maintaining two sets of code (one for IE users, another for regular browser users). Adding the following meta-tag to your page will enable SVG to render in IE (via GCF):
<meta http-equiv="X-UA-Compatible" content="chrome=1">
See here for instructions how to detect, and potentially prompt the user to install GCF.
The best solution I've found is to use Raphael along with this tool, which allows you to convert SVG files (generated by Illustrator, in my case) to Raphael code almost as-is. And since Raphael is IE6+ - you could easily be crossbrowsy with some effort on your part.
Here is my example of what can be achieved with a combination of these two things.
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!
I've seen a few JavaScript image rotators that use either the HTML5 canvas element or an AJAX call to a server-side script, but is it possible to do it without using those methods? Internet Explorer doesn't support canvas (I'm aware of excanvas, but I'd like to do without if possible) and I'm not sure if AJAX will be fluid enough. If there is a way, are there any open source scripts, examples, or resources that you could point me to?
Alas, CSS does not support rotating images in any way, shape or form (unless you count CSS Transforms, which are only supported by Safari 4 and Firefox 3.1).
Your best bet is to use Raphael's image() and rotate(), which should support all semi-modern browsers (using SVG) and most versions of IE (using VML).
This jQuery plugin works in major browsers including IE: http://wilq32.googlepages.com/wilq32.rollimage222 . It makes use of excanvas, but at least it allows you to evaluate if that method is good enough for your purposes.
Yes, via CSS Transform:
var degree=180;
document.getElementById('image_name').style.transform='rotate('+degree+'deg)';
Google is your friend:
http://www.walterzorn.com/rotate_img/rotate_img.htm
But the downside of this technique (as mentioned) is that it uses hacks by inserting a huge number of DIVS so it could slow down the browser a good bit. Use with caution. Problems like this are why the canvas tag was created in the first place.