Turbulenz: Game Script Doesn't Run When Moved to External .js FIle

On starting a new project in the Javascript game engine Turbulenz, an example from the website runs fine when included in script tags within index.html. However, any attempt by me to move that code to an external .js file results in the moved code not being run.

Here's my program (the version that runs):

<!doctype html5>

<html>

<head>
  <title>Blockhead</title>
  <script src="jslib/debug.js"></script>
  <script src="jslib/webgl/turbulenzengine.js"></script>
  <script src="jslib/webgl/graphicsdevice.js"></script>
  <script src="jslib/draw2d.js"></script>
  </head>

<body>
  <canvas id="canvas" width="400px" height="600px"/>
  <script>
     TurbulenzEngine = WebGLTurbulenzEngine.create ({canvas: document.getElementById("canvas")});

     var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});

     var draw2D = Draw2D.create({graphicsDevice: graphicsDevice});

     var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
     var bgColor = [r, g, b, a];

     var x1 = 50;
     var y1 = 50;
     var x2 = graphicsDevice.width - 50;
     var y2 = graphicsDevice.height - 50;

     var rectangle = [x1, y1, x2, y2];

     var drawObject =
       {
       color: [1.0, 0.0, 0.0, 1.0],
       destinationRectangle: rectangle
       };

     var sprite = Draw2DSprite.create
       ({
       width: 100,
       height: 100,
       x: graphicsDevice.width / 2,
       y: graphicsDevice.height / 2,
       color: [1.0, 1.0, 1.0, 1.0],
       rotation: Math.PI / 4
       });

     var texture = graphicsDevice.createTexture
       ({
       src: "particle_spark.png",
       mipmaps: true,
       onload: function (texture)
         {
         if (texture)
           {
           sprite.setTexture(texture);
           sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
           }
         }
       });

     var PI2 = Math.PI * 2;
     var rotateAngle = Math.PI / 32;

     function update ()
       {
       b += 0.01;
       bgColor[2] = b % 1; // Clamp color between 0-1
       sprite.rotation += rotateAngle;
       sprite.rotation %= PI2; //Wrap rotation at PI * 2
       if (graphicsDevice.beginFrame())
         {
         graphicsDevice.clear(bgColor, 1.0);
         /* Rendering code goes here */
         draw2D.begin(); // Opaque
         draw2D.draw(drawObject);
         draw2D.end();

         draw2D.begin('additive'); // Additive
         draw2D.drawSprite(sprite);
         draw2D.end();
         graphicsDevice.endFrame();
         }
       }

     TurbulenzEngine.setInterval(update, 1000 / 60);

  </script>
</body>
</html>

And here's the version that doesn't run (The only change is the inclusion of the new script tag and the moving of all the internal js to that file):

<!doctype html5>

<html>

<head>
  <title>Blockhead</title>
  <script src="jslib/debug.js"></script>
  <script src="jslib/webgl/turbulenzengine.js"></script>
  <script src="jslib/webgl/graphicsdevice.js"></script>
  <script src="jslib/draw2d.js"></script>
  <script src="javascript/blockhead.js"></script>
  </head>

<body>
  <canvas id="canvas" width="400px" height="600px"/>
</body>
</html>

Lastly, here's the page from their site that the walkthrough came from:

http://docs.turbulenz.com/starter/getting_started_guide.html

There's got to be a way to split the program up into multiple files or else projects would become almost unmanageable.

Solution

This should work:

  <canvas id="canvas" width="400px" height="600px"/>
  <script src="javascript/blockhead.js"></script>
</body>

Because

document.getElementById("canvas")

The canvas element doesn't exist when that executes, it has to execute after the canvas element is defined.

If you open the page in chrome you can press f12 to open the developer tool or use Firefox with the firebug extension. The console should show you an error and you can set breakpoints or use console.log to inspect certain variables