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.

screenshot of the developer tools with Document Mode: 'IE9 standards highlighted'

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" "http://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.

a canvas rendering from IE9 same canvas rendered in Chrome - gradients and shadows look different than IE9 same canvas rendered in Firefox - similar to IE9 but certain shadows rendered differently than IE9 or Chrome same canvas rendered in Safari - shadows different yet again same canvas rendered in Opera - also different

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 (40)

  1. Eric says:

    MSIE-team acknowledging the existence of Opera!

    Hopefully you continue this trend in the future as well.

    Great job guys and girls!

  2. Mike Shaver says:

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

  3. Miguel Web Developer says:

    In Google Chrome 7 this logo looks more like Safari screenshot

  4. Paul Irish says:

    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.

  5. Rob says:

    You can test it out and actually use it in any other browser long ago. Why wait on or bother with IE9?

  6. aldo says:

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

  7. Rob says:

    @aldo – Firefox and Chrome have hardware acceleration, too. Bye bye Internet Explorer.

  8. planetarian says:

    Then go fanboy on their websites, your trolling doesn't bring anything to the discussion at all.

  9. Where's the Firefox on Linux screenshot? says:

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

  10. Language says:

    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.

  11. Wheret says:

    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?

  12. Inverted Troll says:

    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.

  13. Anonymous says:

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

  14. MIguel Web Developer says:

    Here is a nice experimental beta html5 test

    http://beta.html5test.com/

  15. johnnyq3 says:

    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.

  16. MIguel Web Developer says:

    @johnnyq3

    Yes… I know 🙂 That it's just a feature in the test.

    I would be graceful, if IE Team implements html5 forms

  17. MIguel Web Developer says:

    @johnnyq3

    Even so "WebGL" is grouped in "Related specifications" (http://beta.html5test.com/)

  18. axe says:

    Why this site doesn't work in IE9?

    9elements.com/…/canvas

  19. EricLaw [MSFT] says:

    @axe: That site appears to work just fine. What problems do you encounter?

  20. Rob says:

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

  21. Ian Boyd says:

    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.

  22. Matt says:

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

  23. Rafael says:

    "DON’T: Browser detection using User Agent string"

    Oh Microsoft that was so cute! *——-*

  24. Mario says:

    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?

  25. EricLaw [MSFT] says:

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

  26. Ian Boyd says:

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

  27. Ian Boyd says:

    How can one perform feature detection in the absence of a scripting engine being present in the browser?

  28. Mario says:

    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?

  29. Mario says:

    and BTW i mean IE8 doesn't show in Programs and features on my windows 7. i hope IE9 won't show in it also

  30. EricLaw [MSFT] says:

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

  31. Mario says:

    @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

  32. EricLaw [MSFT] says:

    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?

  33. Mario says:

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

  34. axe says:

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

  35. Typhoon87 says:

    @axe –

    I agree with you. I only see a black screen with the loading page. It also shows a script error.

  36. EricLaw [MSFT] says:

    @axe, @tom: Thanks for the note. The site works fine in the upcoming IE9 Beta build.

  37. @EricLaw says:

    You should also mention that uninstalling IE9 will be impossible after the installation of a service pack (unless the service pack gets uninstalled).

  38. EricLaw [MSFT] says:

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