Well not just IE, any browser that doesn't currently support it
I want to start using the processing.js framework. It's used for making images with the canvas element. However I'm reluctant to use it due to the fact that it's not widely supported.
So what's the best way for me to give the user an alternative image if they do not support the canvas element?
I'd need something like...
if(!canvas){
element.style.backgroundColor = 'red';
}
Is there a standardised way of doing this yet? If not what's the best thing I could do?
Any content between the <canvas></canvas> tags will be displayed if the canvas element is not supported. So you can try:
<canvas><img src="alt-image-for-old-browsers.png" /></canvas>
The logical thing that comes to mind is to place the JavaScript you want to run between the <canvas></canvas> tags:
<canvas>
<script>
document.getElementById('element').style.backgroundColor = 'red';
</script>
</canvas>
But alas this doesn't work. Even browsers that support the Canvas API will execute the script.
So perhaps the best thing you can do to programatically check that the browser supports the canvas API is to check the getContext method available on all <canvas></canvas> elements:
function supportsCanvasAPI() {
var canvas = document.createElement('canvas');
if (window.G_vmlCanvasManager) { // IE ExplorerCanvas lib included?
G_vmlCanvasManager.initElement(canvas);
}
return 'getContext' in canvas
}
That creates a dummy canvas (so as to not worry about grabbing a reference to one in the DOM already) and checks if the getContext property exists on the element. It also checks to see if ExplorerCanvas has been included for IE. It won't tell you exactly what features of the API are supported (beyond the standard set of shapes, paths, etc).
An article on feature-detecting HTML5 features (like canvas) can be found here.
if (typeof HTMLCanvasElement === 'undefined') {
// redirect to another page, or whatever you want
}
Yes, actually the useful property of HTML is that it ignores unknown tags. So the following:
<canvas> This text is shown to IE users </canvas>
Will show the fallback text in IE.
You may also consider using one of the JavaScript libraries that essentially create a working canvas tag in IE. Here's one: http://code.google.com/p/explorercanvas/
You could look at the Modernizr library to check for support for the various features you're interested in.
Canvas works on Opera, Chrome, Safari, Firefox, IE6-8 (with excanvas.js, as #philfreo mentioned).
Processing.js, in particular, does work on IE, as is stated on the Processing.js homepage:
Processing.js runs in FireFox, Safari,
Opera, Chrome and will also work with
Internet Explorer, using Explorer
Canvas.
There are a few tricks with IE: You need to pay special attention when you create a Canvas dynamically, you can't attach events to it (directly--you can attach to a container div), you can't get pixel info from the canvas, and radial gradients aren't supported. Oh, and it's a lot slower on IE, of course.
I don't think any of those caveats will apply to you when you're working in processing.js, except of course for the slowness of excanvas.js emulating the canvas.
Related
I am in a situation right now where I need to have some complex code working with Kinetic.js and a canvas element to work on IE8.
Officially, Kinetic.js has no plans of supporting IE8.
I tried using webshims lib but Kinetic.js fails on the following code:
Kinetic.Canvas = function(width, height) {
this.element = document.createElement('canvas');
this.context = this.element.getContext('2d'); //<-- Error here
// set dimensions
this.element.width = width;
this.element.height = height;
};
The error is "Object doesn't support property or method 'getContext'". It makes sense to me, since I would not expect the element canvas created by an IE8 document to implement the methods for a canvas element, but if the <canvas> element was already created, webshims would have played and you could use the methods. However, forcing Kinetic.js to use one single canvas element will break some of its functionality (since it creates canvas objects on the fly).
Which are my options in order to achieve this?
The simple answer is "no."
As one commentor mentioned, Google Chrome Frame is an OK substitute, which entails essentially installing Chrome's rendering engine as an IE plugin.
There's the excanvas project, which might sound good at first. It was an attempt to implement canvas in VML (SVG) so that IE 6-8 could use canvas.
Excanvas is awful. Especially with any animation, and it cannot do some canvas image manipulation stuff. And it hasn't been updated in almost 4 years. I highly suggest against using it, but it's there for your consideration.
I'm working on a project that requires an interactive map. I want to use an SVG document with some custom javascript code embedded in it much like this developer has done:
http://treeblurb.com/xmap/svg/melbourne_central.svg
Achieving what I want to do is trivial but I can't tell which browsers would support this level of interaction. Essentially I need to:
Embed custom script tags into the document.
Adjust attributes of nodes (i.e. fill)
Add mouse events to specific elements.
I guess my question is - if a browser supports native SVG, would it allow me to do all of these things?
Native SVG is supported by most versions of Chrome, Firefox, Opera and Safari. IE8 does not support it, but IE9 and above does. Android supports it from Honeycomb onward.
You may want to take a look at Raphael. It not only makes SVG-like functionality available in IE8 and below (by falling back to VML), it also provides methods to manipulate all objects, which you can even combine with JQuery.
There's also good information comparing Raphael to JQuery SVG here.
I.E. 8 and earlier does not support SVG. Android 2.3 and earlier also does not support SVG. Check out more browser compatibility issues here: http://www.caniuse.com/
Yesterday I was having an issue with some google graphs on my site while running opera. I was getting the error "your browser does not support graphs". Today Its absolutely fine and in fact seems to be running a bit quicker.
I'd like to have a backup in my javascript so that if its not supported Ill just display a table.
Is there any such way to do this or do i need to check against a list of incoming browsers and figure it out for myself?
From http://code.google.com/intl/en/apis/chart/interactive/docs/:
Charts are rendered using HTML5/SVG technology to provide
cross-browser compatibility (including VML for older IE versions) and
cross platform portability to iPhones, iPads and Android.
They are apparently using inline SVG. http://caniuse.com/#search=inline%20svg isn't very useful here because that's about HTML5 parser recognizing SVG content, Google is generating SVG content dynamically however. I think that the following code snippet tests for inline SVG support correctly:
var svgRoot = null;
if ("createElementNS" in document)
svgRoot = document.createElementNS("http://www.w3.org/2000/svg", "svg");
if (svgRoot && "width" in svgRoot)
alert("Inline SVG supported");
If a dynamically created SVG element has SVG-specific properties then everything should be fine. You will still have to assume that MSIE is generally supported (via VML). Or use How do you detect support for VML or SVG in a browser to detect VML support. And that will hopefully match the compatibility checks that Google is performing (minus glitches like the one you apparently observed).
I was playing around with RaphaelJS and realized that it gets inline SVG working in Firefox 3.6.22 (at least it looks like it, or am I fooled by Firebug...).
As my own SVG does not show up, I was wondering how RaphaelJS accomplishes this feature when Firefox 3.6 does not support blunt inlining of SVG. I (briefly) looked at the source and also found another answer how inline SVG can work in older Firefox browsers. Still, I am stuck getting this to work for myself (i.e. AJAX-loading SVG and placing it into the DOM).
I am going to answer my own question:
Raphaël is not really doing anything special (in this case).
Thanks to the answers to my post on the Raphaël Google Group I was pointed in the right direction. "Inline SVG" means "inline with common HTML" (also explained in a Mozilla blog post), so without using XHTML and proper namespacing. My prior understanding was that I could use SVG only via <object> or <embed> in some browsers (like Safari 4 or Firefox 3.6)... which is wrong.
I was adding SVG by passing it as an XML string to jQuery's .html() method. This works fine in the current versions of most modern browsers but the method name gives a hint that this might not be the right way if you want to add SVG in a browser that does not support SVG in html. So I changed my code and used document.createElementNS to add my SVG directly to the DOM. There is another way to bulk-inject my SVG-XML (as mentioned in the Google groups thread), but I did not have the time to look into it yet.
So now I got my SVG working in all targeted browsers but the older IEs, which is nice. Sample code:
var svgContainer = document.getElementById("svg-container"),
svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"),
g = document.createElementNS("http://www.w3.org/2000/svg", "g");
svgElement.setAttribute("version", "1.1");
// Add stuff to the group
svgElement.appendChild(g);
svgContainer.appendChild(svgElement);
I am looking at using HTML5 Canvas element for my upcoming project. I want to know what all major browsers (including the versions!, cos i know that the latest builds do support canvas) support the Canvas tag. I don't give a damn about IE. So don't bother reporting IE. :) In this tutorial Drawing shapes - MDC, the quadraticCurveTo section says:
quadraticCurveTo(cp1x, cp1y, x, y) //
BROKEN in Firefox 1.5 (see work around
below)
Does that mean that Canvas is supported on Firefox 1.5 and above too?
caniuse.com lists browser support for many different features, including canvas.
Specifically, browser support for canvas is listed at caniuse.com/#search=canvas.
It's not only about "supporting Canvas", but about the bugs that each implementation has about this and missing methods that have been added since the initial release. So even if one version of Firefox does add the basic Canvas support, it might have some bugs that make it impossible to use it in your application.
In that case, you might need to check the current versions and then go back as far as you want to support to verify if they work as expected.