Search code examples
imagedojointernet-explorer-7excanvas

excanvas + Dojo: getContext is undefined


When I execute the code below in IE7/WinXP32, then the output in the console is "undefined". The output changes to the expected "getContext()", when I make either of two modifications:

  • I remove the image tag.
  • I use: <body onload="draw()">

Any idea what is going on here? What may be a workaround?

<!DOCTYPE HTML PUBLIC 
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title>Canvas</title>        
  <script type="text/javascript">
    var djConfig = {parseOnLoad: false, isDebug: true};
  </script>
  <script type="text/javascript" 
    src="/development/javascript/dojo-release-1.4.3-src/dojo/dojo.js">
  </script>
  <!--[if IE]>
    <script type="text/javascript" src="/javascript/excanvas_r73.js"></script>
  <![endif]-->
  <script type="text/javascript">
    function draw() {
        var canvas = dojo.byId("canvas");
        console.log(canvas.getContext);
    }

    dojo.addOnLoad(draw);
  </script>
</head>

<body>
  <canvas id="canvas" width="100" height="100"></canvas>
  <img src="nonexisting.gif">
</body>

</html>

Update: Seems like replacing "dojo.addOnLoad(draw);" with the following code does the trick.

function init() {
    dojo.addOnLoad(draw);
}

if (dojo.isIE) {
    dojo.connect('onload', init);
} else {
    init();
}

Solution

  • dojo.addOnLoad fires before document.onload. I think it's associated with DOMContentLoaded. Perhaps excanvas does its initialization on the same event? Can you just use document.onload?