Canvas elements not working in IE 8 and below - javascript

I have used this tutorial: Save Google charts as a image which converts Google Graphs into an image and then saves it for me.
It's working perfectly and it achieves this by creating a canvas element and then drawing the graph onto it.
However and typical with IE its doesnt work with any browser lower than 9. Which is a huge problem as most of our clients are still in the dark ages. sadly.
Can anyone recommend a good solution to this or has any of you got any experience to share on this matter?

You can use ExCanvas
Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
Reference

#wizkid's answer is a good suggestion in it self - however, the only problem is that exCanvas do not support toDataURL() and won't due to the nature of it using VML. This means you won't be able to use it to save out images.
Update
You can use flash to solve this problem. There are two solutions available:
http://code.google.com/p/fxcanvas/
http://flashcanvas.net/
Both of these should be able to save out bitmap images from the "canvas" as png and jpeg (ref: fxcanvas, flashcanvas). This would of course require the client to have Flash player installed.
The third option is to use a server as a proxy (or as processor) for Google charts.

Related

svg on older IE browsers [duplicate]

Does anybody know of a comprehensive library to make SVG work with IE (7 and 8 in particular)?
I wanted something Javascript which could be included in my web page and which would silently convert all my SVG to VML in a fashion similar to what excanvas does for Canvas.
The Raphaël—JavaScript Library can help you out there.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics and supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
EDIT:
There are two more js-libraries which use vml to render svgs in IE:
Ample SDK (where it should be possible to easily integrate existing svg files)
DojoX GFX from the Dojo Toolkit
Google's SVG Web does this. According to the project website:
SVG Web is a JavaScript library which
provides SVG support on many browsers,
including Internet Explorer, Firefox,
and Safari. Using the library plus
native SVG support you can instantly
target ~95% of the existing installed
web base.
Whilst it's described as a JavaScript library it also requires Flash 9+. This isn't usually a problem, but if you're in a corporate environment with old Flash or no Flash on the workstations it's not going to work.
Also, it is still in Alpha which could be a problem, depending on what your project is.
I think SVGWeb is the way to go, even if it is based on Flash as VML is far from being fast enough for lots of applications.
Adobe provides scripts to automatically detect, install, and redirect you back to your original site:
http://support.adobe.com/devsup/devsup.nsf/docs/51780.htm
http://www.adobe.com/svg/workflow/autoinstall.html
I have been using this fairly successfully on my site.
A more low tech solution would be to use something like svg_alike (insert conflict of interest notification here :)). It checks for the SVG support, then if it doesn't find it it replaces all SVG images with PNGs.
https://github.com/forwardadvance/svg_alike
You lose the advantages of smooth vector zooming, and retina support, but IE8 users are unlikely to make use of these features anyway.
The advantage is that you don't have to convert your images into JavaScript. I think it provides 80% of the value for 5% of the work.

Standalone javascript applications, html5 canvas games...ideally with V8, or adjusting game based on browser

Other than just sniffing browsers and telling anyone not using Chrome tough luck on purpose (75%+ of the internet?), I'm looking for different options to make an executable out of a canvas game, if that's even possible.
The idea is to control the performance of my game by including v8 to users who don't have chrome installed.....is there a way to interface with it?? Something like a web "wrapper" like Flash's plugin so you could install a v8 "plugin" cross browser???
The canvas game works with safari and firefox, but at 50-60% of the performance experienced in google chrome.
Another discrepancy is with Firefox if I make the game map more than 100x100 tiles, it chokes when generating the map and gives a "stop script" popup, if you hit "continue" it throws another popup for "out of memory, close your stuff to prevent data loss".
Using the same code in Chrome or safari, I tested maps with 500x500 tiles (yes that is 250,000 tiles, where firefox choked on 10,000 tiles....) which runs smoothly/consistently in both Chrome and Safari, though safari is 60% of the frame rate chrome manages.
I haven't yet found a limit to what chrome can handle, and using culling to only draw tiles around the view it's the same frame rate with 250,000 tiles as it was with 100 tiles (more than 200fps in chrome with 250k tiles!!!!! small view though), the only thing that changes performance is the size of the canvas element/view. Meanwhile Firefox can't even calculate the zones, let alone draw all the tiles inside the proper zones. (it does work over 100fps with maps 10k tiles or less)
It's tempting to allow anyone with a browser that supports html5 to play the game, but at the same time, user's opinion of your game will be MUCH MUCH MUCH better if the PERFORMANCE IS TWICE AS GOOD as the crappiest version that "can" play your game.
I'm reading about V8, and how you can incorporate it into your own c++ applications, or run it standalone?? Has anyone developed a wrapper to make a self contained executable for html5 canvas games?? Or a web wrapper to embed an interface to V8 or something???
I just installed chrome myself this week, after trying to target as many browsers as I could in the past, and it changed the way I think, now it's just not as good once you've had over 200fps to then play the same game with under 100fps..............And as much as I've thought it was idiotic to require chrome (seen lots of html5 devs begging people to use chrome) I've come to the realization I was ignorant, and now I think the only way to enforce the full potential of my efforts is to drop coverage for all browsers except ones that can output a set level of performance.
Otherwise the only thing I can figure is to make a different version of whatever games I develop for firefox with a smaller viewable window, smaller map, etc, then on other browsers, check performance and scale the view/map size based off what browser they're using.
Another temporary idea I was thinking of, if a user has google chrome, the game window will be 700x500px on the screen, if they have safari, drop it to like 500x375px to achieve the same frame rate, and if they have firefox the window will be like 400x300px.
At the same time, if a user is playing the game with Firefox, in the 400x300px window, I would include an obvious(blinking? lol) border around the window 700x500px showing how big the game window would be if they were using chrome? Does that sound like motivation? Then they can get a taste of the game, if they like it they might find it worthwhile to install chrome to view the full size game????
For IE<9, you can do what you're after with Google Chrome Frame. This works like a Flash-style plugin, which you can prompt users to install. It isn't available for Firefox or Safari, as far as I know.
While I'm aware of several frameworks for desktop apps using HTML and Javascript, they generally seem to use WebKit, so I would expect performance to be comparable to Safari at best (Titanium Desktop from Appcelerator is another option, but also WebKit-based).

SVG support for Internet Explorer 8 and below

I created animation in flash and converted it into HTML5 using Swiffy.
I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.
Thanks!
While no option is perfect, there are a few choices:
1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444
2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/
3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/
4.) There is the option to display flash for IE8 and below.
5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.
Based on your reason for the animation - I would recomend 4 or 5.
There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):
Chrome Frame: if you're going to get an extension, get that one
Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back.
If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg.
You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.
The best option probably is to diplomatically encourage them to use a real browser, but then it's not always possible for those who live under the rule of an unskilled IT department ;)

Embedded pdf displays in front / on top of absolutely positioned html elements

PDF embedded with embed as well as iframe, gives same results
I have found this question: but I need a detailed description of how this answer solved the OP's problem, sice theres not much to go on in the answer there.
My embedded pdf displays on top of all absolutely positioned elements on my page in Internet Explorer 6 through 8. I attempted the iframe shimming technique using jQuery.bgiframe, modified to trigger in all IE browsers, without results
I doubt this is possible.
Keep in mind, that plugins are separate programs from the browser that communicate with the browser over a very simple API. For the browser to be able to draw over the plugins canvas, they would need to communicate much more closely than the plugin API allows, so that the plugin doesn't redraw over anything the the browser draw on the plugins canvas.

What is the most widely-used Javascript graphics library that is the most cross-browser compatible?

I know there are tons of great graphics libraries for javascript...
Now, I know that there are other questions asking for graphics library suggestions. But none of them address the following issues:
What is the most widely-used javascript-graphics library right now?
Can it handle text, rotation, arcs, bezier-style line geometries, and is compatible with at least FF, IE(7/8), Safari, and Chrome...
Also, because of my client's fears of required plug-ins that users need to add to their browser, it needs to be something that can load on-the-fly and not require the user to permanently install anything external.
Does such an animal exist?
I am looking for your experienced opinion on this one.
For cross platform support I generally find I can trust Raphael to do the job.
I'd look at processingjs first.
http://processingjs.org/
I suggest using the html5 <canvas/> element with the 2d graphics API.
Although the canvas element isn't supported in IE, you can make it work with excanvas.js from http://code.google.com/p/explorercanvas/.
Explorer canvas is a simple javascript include that emulates canvas element support using vector graphics. On the other browsers, you will have canvas support.
I used this approach to make a realtime scrolling trend control that worked across browsers.

Categories