Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts

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