Tuesday, May 01, 2012

HTML5 excanvas "Object doesn't support this property or method"

I'm building a little HTML5 practice page at www.MyDoodleDot.com and was having problems getting "excanvas", the shim for using the HTML5 canvas element in older IE browsers. In my HTML I included the conditional running of the excanvas shim with this:
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
But when IE got to the second line below, it would die with "Object doesn't support this property or method".
    var canvas = document.getElementById("mycanvas");
    var context = canvas.getContext("2d");
The problem was that excanvas.js had not been fully loaded, so when IE hit that line, the canvas object didn't have a "getContext()" method. This happened because I was using this to start my javascript,
$(document).ready(letsStart);
The "ready()" method kicks off when all the DOM has (pretty much) loaded, but excanvas.js still wasn't loaded. The solution was to replace "$(document).ready(letsStart);" with
window.onload = letsStart;
Then my canvas app started working fine with an old version of IE.
BTW, my five year old daughter made this with www.MyDoodleDot.com

1 comment:

Anonymous said...

Thank you. I've been searching for "inconsistencies with excanvas" until I stumbled across your blog. My canvas would load the first time in IE8 and I would have to restart it to make canvas work again.