Debugging Common Canvas Issues
As we’ve previously discussed, IE9 includes support for HTML5 canvas. You can test it out right now by downloading the latest platform preview. In our testing of sites that use the latest web standards, we are pleased to see that many canvas sites just work in IE9. For those of you using <canvas> on your site, we have two tips to make sure it works properly across browsers and in IE9: use feature detection instead of browser detection, and use <!DOCTYPE html>.
Be sure to use feature detection instead of browser detection
If you are using browser detection, such as automatically falling back to a non-canvas implementation if you detect that the user is using an IE User Agent string, you may be blocking HTML5 content from rendering in IE9. Instead of doing browser detection, you should do feature detection to check if the user’s browser has a certain capability. For instance, you can use this code to check if your user’s browser supports canvas:
var canvas = document.createElement("canvas");
if (canvas.getContext && canvas.getContext("2d")) {
{
// Code requiring canvas support
} else {
// Canvas isn't available. Put non-canvas fallback here
}
This eliminates the need for you to make assumptions about current browser feature support and ensures your site will continue to work as browsers evolve. We explain more about feature detection in this post.
How to check if the user’s browser supports Canvas:
- DO: Canvas feature detection code
- DON’T: Browser detection using User Agent string
- DON’T: Conditional comments
Make sure your site is in IE9 mode
By default, if your site is following web standards, such as using a standards DOCTYPE, IE9 will render it in standards mode. You can check if your site is in this mode by bringing up the Developer Tools (press F12) and checking to see if your site is in IE9 standards Document Mode.
Canvas is a new feature only supported in IE9 standards mode – a design decision we took to ensure that legacy document modes remain fully backward compatible. If you see a Document Mode for your site other than IE9 standards, HTML5 elements like canvas won’t be displayed. For example, if you don’t have a DOCTYPE in your page, IE9 will display the site in Quirks Mode. To ensure your page works as expected in IE9, we recommend that you add a strict DOCTYPE to your webpages. For example, you could add the W3C HTML5 DOCTYPE:
<!DOCTYPE html>
Or you can use a common strict DOCTYPE such as this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
You can read more about how IE determines the document mode here.
Interoperability and Canvas
Interoperability is a high priority for IE9, to the point where we recommend sending IE9 the same standards-based markup your site sends to other browsers. Most canvas sites should just work on IE9 if the site was originally developed for another browser. That being said, there are a few behavior differences between browsers. For instance, consider the shadow demo from the Canvas Pad test drive site.
This is one example of a canvas feature that is rendered a little differently in each browser. We are making IE9 interoperable whenever possible, but for some canvas features, other browsers do not have a complete or correct implementation. In these cases, we follow the W3C spec. We submit test cases to the W3C as a way to help ensure everyone agrees on how the spec should be interpreted and implemented. To learn more about our shadow implementation, check out our canvas tests from the IE Test Center.
The purpose of the W3C spec is to define a standard that all browsers should follow. If we find examples where browsers uniformly behave differently from the spec, we feel that spec should be updated to reflect the interoperable behavior, if it makes sense for web developers. For instance, HTMLFrameElement did not contain the contentWindow attribute in the W3C spec; however IE8, Firefox, and Chrome all support this attribute. We filed a bug with a proposed change, and the HTML5 editor updated the latest revision of the spec.
If something looks unexpected in IE9 and you believe it is an interoperability issue or an area where we deviate from the spec, please let us know by filing a bug with Microsoft Connect. One of our goals around the platform previews and the beta of IE9 is to give our users a chance to give us as much feedback as possible, so don’t hesitate to let us know if you think you see a bug!
Thanks,
Elizabeth Ford and Jatinder Mann
Program Managers, Internet Explorer
Edit 9/9: Updated the detection code sample to be more robust. Thanks to Paul Irish for pointing out this problem.
Comments
Anonymous
September 08, 2010
MSIE-team acknowledging the existence of Opera! Hopefully you continue this trend in the future as well. Great job guys and girls!Anonymous
September 08, 2010
Great, GREAT to see canvas in IE9 -- very exciting development, and will unlock a lot of capabilities for the widely-deployed web. So thank you very much for that! Do you intend to implement globalCompositeOperation before IE9's release? It is currently a no-op, and since misbehaviour of specific composite operations have been reported as bugs in Chrome and Firefox in the past, I think it's something that content authors are using. (It's difficult to accelerate it effectively with Direct2D, as we've found, but you guys could probably get support added to D2D more easily than we can. :-) )Anonymous
September 08, 2010
In Google Chrome 7 this logo looks more like Safari screenshotAnonymous
September 08, 2010
So it turns out blackberry storm and the s60 will false positive on the basic canvas getContext method test above. A more robust test is to check that the return value of .getContext('2d') is truthy. Fun times, eh? :) This is what is currently in Modernizr.Anonymous
September 08, 2010
You can test it out and actually use it in any other browser long ago. Why wait on or bother with IE9?Anonymous
September 08, 2010
@Rob Why? Other than IE being used so much? Why bother? Because there are people like you who will then complain until Microsoft implements [insert feature here], but even when they do, people like you still complain. I think it is great! IE9 is very fast thanks to hardware acceleration, and as soon as IE9 beta comes out, buh-bye Firefox and Google Chrome, hello Internet Explorer :-)Anonymous
September 08, 2010
@aldo - Firefox and Chrome have hardware acceleration, too. Bye bye Internet Explorer.Anonymous
September 08, 2010
Then go fanboy on their websites, your trolling doesn't bring anything to the discussion at all.Anonymous
September 08, 2010
@planetarian - Actually this blog is one big troll. They keep on comparing features of a browser (IE9) that doesn't exist to what currently does exist. Where's the IE 8 screenshot? Where's the Ubuntu Firefox 3.6.x screenshot? (Firefox on Linux uses hardware acceleration already and the rendering is much nicer than on Windows) You want to compare experimental? Ok then where's the Firefox 4 screenshot? Where's the Chrome 7 screenshot? They're all strategically left out. Isn't that interesting.Anonymous
September 08, 2010
Linuxboy: You need to learn what the word "troll" means. To troll is to go to a forum with fans of (or merely persons interested in) a particular technology and lie, mislead, belittle, insult or otherwise provoke those people in the hopes of sparking a pointless argument or debate. So, basically, you've provided a good example with your post, on multiple counts. This is the IE blog, not the whining linux complainers blog. For example, it would be trolling if IE fans went over there and pointed out how pathetic it is that Linux still has less marketshare than even the silly Mac, despite being totally free for over a decade.Anonymous
September 08, 2010
What's up with the mouse position report in this example? Let's see what dimension does the white (canvas without the border) region have and in what dimensions the mouse event is reported: IE9: canvas (0;0)-(399;499) overall (-1;-1)-(400;500) Opera 10.70: canvas (0;0)-(399;499) overall (-1;-1)-(400;500) FF 3.6.9: canvas (1;1)-(400;500) overall (0;1)-(401;502) Safari 5.0.1: canvas (1;1)-(400;500) overall (0;0)-(401;501) What does the standard say about this?Anonymous
September 09, 2010
Thank you Mr. Language. If you can't see how the posts on this blog are lies, mislead etc. and that the majority of readers are fans of the competition then you're missing what's going on here. The intended audience of this blog is the competition. IE fanboys are not the ones that MS is trying to gain mindshare from.Anonymous
September 09, 2010
@Rob I think you don't appreciate the value of all the work that is going on here. In case you didn't notice, the second poster, Mike Shaver, is an actual firefox engineer, he even has his own wikipedia article. Reading his post it would almost seem as if he is more excited about IE9's progress than anyone else who commented. Your comment "why wait on or bother with IE9" is short sighted in that it seems to imply IE shouldn't implement features because somebody else did that first.Anonymous
September 09, 2010
Here is a nice experimental beta html5 test http://beta.html5test.com/Anonymous
September 09, 2010
Miguel Where in the W3C HTML5 specification is WebGL? Last time I check it wasn't and just a wishlist feature. If you want it to be part of the spec submit a request to the W3C.Anonymous
September 09, 2010
@johnnyq3 Yes... I know :) That it's just a feature in the test. I would be graceful, if IE Team implements html5 formsAnonymous
September 09, 2010
@johnnyq3 Even so "WebGL" is grouped in "Related specifications" (http://beta.html5test.com/)Anonymous
September 09, 2010
Why this site doesn't work in IE9? 9elements.com/.../canvasAnonymous
September 09, 2010
@axe: That site appears to work just fine. What problems do you encounter?Anonymous
September 09, 2010
The comment has been removedAnonymous
September 09, 2010
Is there any way to perform feature detection on the server? I want to feed the client html/doctype/css/script based on the abilities available in the browser.Anonymous
September 09, 2010
<<Is there any way to perform feature detection on the server? >> Basically, no. The common way of doing that is really "feature guessing" and that's called "UA sniffing" and it's evil. You could do a quick feature detection on the client using script, then use that script to pull in new resources from the server based on the client's capabilities, but then the feature detection itself is still happening on the client.Anonymous
September 09, 2010
"DON’T: Browser detection using User Agent string" Oh Microsoft that was so cute! -------Anonymous
September 10, 2010
Hello will Internet explorer 9 have themes and if somebody updates their IE8 on windows 7 will it say this is a program that is part of windows in the compatibility mode tab? and also will IE8 update using windows update? and is it possiable to hide it in the Cpanel?Anonymous
September 10, 2010
@Mario: We haven't announced the IE9 UI yet, but please stay tuned for Beta. Yes, the Compatibility Mode tab will indicate the IExplore.exe is a part of Windows. All versions of IE are updated by Windows Update. If IE8 is hidden using the Control Panel, IE9 will be hidden as well.Anonymous
September 10, 2010
@Matt Matt said: <<Is there any way to perform feature detection on the server? >> Basically, no. The common way of doing that is really "feature guessing" and that's called "UA sniffing" and it's evil. You could do a quick feature detection on the client using script, then use that script to pull in new resources from the server based on the client's capabilities, but then the feature detection itself is still happening on the client. You've said what way is evil, and you said what i "could" to. What should i do? Considering the page is xml, with an xml-stylesheet telling it which stylesheets to use, e.g.: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type='text/xsl' href='/css/homepage_handheld.xsl' media='handheld'?> <?xml-stylesheet type='text/xsl' href='/css/homepage.xsl' media='all'?> The xsl will contain the doctype <!DOCTYPE html>, unless it's a browser which i need to enable standards mode on. In that case it needs to be a different doctype, with different CSS, with different HTML, with different layouts, with different content.Anonymous
September 10, 2010
How can one perform feature detection in the absence of a scripting engine being present in the browser?Anonymous
September 10, 2010
Thanks! And are you sure? that internet explorer 9 will not show in the Control Panel? and how can i hide stuff in the Control Panel?Anonymous
September 10, 2010
and BTW i mean IE8 doesn't show in Programs and features on my windows 7. i hope IE9 won't show in it alsoAnonymous
September 10, 2010
@Mario: I'm not sure I understand your question. When an Windows 7 user installs IE9, the "Windows Internet Explorer 9" appears under "View Installed Updates" in the Programs and Features control panel applet. This applet allows the user to uninstall IE9 and go back to IE8. In contrast, to hide/block IE8, the user must choose "Turn Windows Features on or off" and select "Internet Explorer 8" in that popup dialog.Anonymous
September 10, 2010
@EricLaw [MSFT] i thought uninstalling internet explorer in Programs and features would delete Internet explorer from the system? so wait it doesn't? My Windows 7 is a 64-bit and I hope i can make IE9 when it comes out to make it NOT show in Control PanelAnonymous
September 10, 2010
Mario, if you uninstall IE9 from Windows 7 using "View Installed Updates" then yes, it is removed from the system and IE8 will be restored. I don't understand why you hope to hide IE9 from the Control Panel?Anonymous
September 10, 2010
@EricLaw [MSFT] i just don't like to see Internet Explorer in the Control panel it stands out a lot and i don't want to by mistake click uninstall.Anonymous
September 10, 2010
@EricLaw [MSFT] I don't see the website at all in IE9 Platform 4. I just see the page's background color and the words "loading" and at the bottom it says "Script error encountered".Anonymous
September 10, 2010
@axe - I agree with you. I only see a black screen with the loading page. It also shows a script error.Anonymous
September 10, 2010
@axe, @tom: Thanks for the note. The site works fine in the upcoming IE9 Beta build.Anonymous
September 10, 2010
You should also mention that uninstalling IE9 will be impossible after the installation of a service pack (unless the service pack gets uninstalled).Anonymous
September 10, 2010
@Me: That is incorrect. That was only ever true on Windows XP, which didn't have the benefit of the CBS architecture that was introduced with Windows Vista.Anonymous
September 11, 2010
dl.dropbox.com/.../canvas_test.pngAnonymous
September 15, 2010
495000
