{"id":2982,"date":"2010-08-06T14:55:29","date_gmt":"2010-08-06T13:55:29","guid":{"rendered":"http:\/\/www.itwriting.com\/blog\/2982-testing-the-canvas-element-in-internet-explorer-9.html"},"modified":"2010-08-06T14:55:29","modified_gmt":"2010-08-06T13:55:29","slug":"testing-the-canvas-element-in-internet-explorer-9","status":"publish","type":"post","link":"https:\/\/www.itwriting.com\/blog\/2982-testing-the-canvas-element-in-internet-explorer-9.html","title":{"rendered":"Testing the Canvas element in Internet Explorer 9"},"content":{"rendered":"<p>I\u2019m impressed by the demos at the <a href=\"http:\/\/ie.microsoft.com\/testdrive\/\" target=\"_blank\">IE9 Testdrive site<\/a>, which is full of fun and interest. Of course it\u2019s good to try the demos in other recent browsers, though as you would expect on a Microsoft site, IE9 tends to work best. For example the great <a href=\"http:\/\/ie.microsoft.com\/testdrive\/Graphics\/IEBeatz\/Default.xhtml\" target=\"_blank\">Beatz<\/a> demo scored 8510 in IE 9 versus 1560 in Google Chrome 6 (developer build):<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image3.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image_thumb3.png\" width=\"404\" height=\"221\" \/><\/a> <\/p>\n<p>But are these demos slanted to favour IE9? I looked around for some independent demos, especially for the Canvas element. Here\u2019s <a href=\"http:\/\/developer.mozilla.org\/samples\/raycaster\/RayCaster.html\" target=\"_blank\">one on developer.mozilla.org<\/a>, for example:<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image4.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image_thumb4.png\" width=\"404\" height=\"212\" \/><\/a> <\/p>\n<p>Hmm, it looks like some of these demos do not allow for the possibility of Internet Explorer supporting Canvas. What about <a href=\"http:\/\/cs.helsinki.fi\/u\/ilmarihe\/canvas_animation_demo\/mozcampeu09.html\" target=\"_blank\">this one<\/a>?<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image5.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image_thumb5.png\" width=\"404\" height=\"221\" \/><\/a> <\/p>\n<p>Not too good either. I tried downloading it and hacking it to work in IE9. I disabled the script that conditionally displays the Chrome Frame offer and tried again. Another failure, because IE9 loaded the page in IE5 document mode. When I have a moment I\u2019ll work out why. I forced IE9 mode (Debug menu) and at last was in business, sort-of:<\/p>\n<p><a href=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image6.png\"><img loading=\"lazy\" decoding=\"async\" style=\"border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px\" title=\"image\" border=\"0\" alt=\"image\" src=\"http:\/\/www.itwriting.com\/blog\/wp-content\/uploads\/2010\/08\/image_thumb6.png\" width=\"404\" height=\"256\" \/><\/a> <\/p>\n<p>Chrome is on the left, IE9 on the right. This is an animation with speech bubbles, and there is some problem with the text handling because the bubbles do not appear in IE9. Still, it did run. I noticed that IE9 ran slightly faster than Chrome, but with nothing like the big Testdrive difference: 209fps versus 164 fps, for example, but varying considerably as the animation proceeded.<\/p>\n<p>I also tried with Mozilla Firefox 3.6, which is much slower than Chrome on this example, around 71 fps.<\/p>\n<p>No conclusions yet, but watch this space. It would also be helpful if more of the folk doing Canvas demos would test with IE9 as well as Chrome, Firefox, Safari and Opera. The experience bears out what Microsoft is preaching: test for the feature, not the browser version.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m impressed by the demos at the IE9 Testdrive site, which is full of fun and interest. Of course it\u2019s good to try the demos in other recent browsers, though as you would expect on a Microsoft site, IE9 tends to work best. For example the great Beatz demo scored 8510 in IE 9 versus &hellip; <a href=\"https:\/\/www.itwriting.com\/blog\/2982-testing-the-canvas-element-in-internet-explorer-9.html\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Testing the Canvas element in Internet Explorer 9<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,67,96],"tags":[243,425,462,494,613],"class_list":["post-2982","post","type-post","status-publish","format-standard","hentry","category-google","category-professional","category-web-authoring","tag-canvas","tag-google-chrome","tag-html-5","tag-internet-explorer-9","tag-mozilla-firefox"],"_links":{"self":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/2982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/comments?post=2982"}],"version-history":[{"count":0,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/posts\/2982\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/media?parent=2982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/categories?post=2982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itwriting.com\/blog\/wp-json\/wp\/v2\/tags?post=2982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}