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:

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:

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.

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. 🙂 )

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 🙂

@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.

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.

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.

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 – Mike is excited because this means IE won't hold back the web as much and we can do less double coding – once for modern browsers and a set of hacks for IE. We can be less concerned about using some modern methods that don't work in IE, including "modern methods" from 10 years ago, like XHTML and SVG.

I see 'sorties here patting the team on the back when an "It's about time!" is all they really earned.

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.

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?

@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.

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.:

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.

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.

@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 Panel