title: Javascript Runtime Error: app undefined
body: <p>I'm trying to make a somewhat basic app using Canvas and Javascript for a Windows 8 Application I'm making. Upon compiling the code in Visual Studio 2012 for windows 8 Apps I get the following message</p>
  
  <blockquote>
    <p>0x800a1391 - JavaScript runtime error: 'app' is undefined</p>
  </blockquote>
  
  <p>What Have I done wrong and what code do I use to fix the issue?</p>
  
  <p>HTML </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Untitled&lt;/title&gt;
  
      &lt;!-- WinJS references --&gt;
      &lt;link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /&gt;
      &lt;script src="//Microsoft.WinJS.1.0/js/base.js"&gt;&lt;/script&gt;
      &lt;script src="//Microsoft.WinJS.1.0/js/ui.js"&gt;&lt;/script&gt;
  
      &lt;!-- references --&gt;
      &lt;link href="/css/default.css" rel="stylesheet" /&gt;
      &lt;script src="/js/default.js"&gt;&lt;/script&gt;
      &lt;!-- CreateJS --&gt;
      &lt;script src="js/createJS/easeljs-0.5.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/createJS/preloadjs-0.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="gameCanvas"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var canvas, content, stage;
  var bgimage, b1Image, p2Image, ammoImage, p1Lives, p2Lives, title, endGameImage;
  var bgbitmap, p1bitmap, p2bitmap, ammoBitmap;
  var preload;
  
  // Scale Factor
  var SCALE_X = window.innerWidth / 800;
  var SCALE_Y = window.innerHeight / 480;
  var MARGIN = 25;
  var GROUND_Y = 390 * SCALE_Y;
  
  
  function initialize() {
      canvas = document.getElementById("gameCanvas");
      canvas.width = window.innWidth
      canvas.height = window.innerHeight;
      context = canvas.getContext("2d");
  
      function prepareGame() {
          bgimage = preload.getResult("screenImage").result;
          bgbitmap = new Bitmap(bgimage);
          bgbitmap.scaleX = SCALE_X
          bgbitmap.scaleY = SCALE_Y
          stage.addChild(bgBitmap);
  
          stage.update();
      }
  
      //PreloadJS
      preload = new PreloadJS();
      preload.onComplete = prepareGame;
      var manifest = [
      { id: "screenImage", src: "images/Backgrounds/gameplay_screen.png" },
      { id: "redImage", src: "images/Catapults/Red/redIdle/redIdle.png" },
  { id: "blueImage", src: "images/Catapluts/Blue/blueIdle/blueIdle.png" },
  { id: "ammoImage", src: "images/Ammo/rock_ammo.png" },
  { id: "winImage", src: "images/Backgrounds/victory.png" },
  { id: "loseImage", src: "images/Backgrounds/defeat.png"  },
  { id: "blueFire", src: "images/Catapults/Blue/blueFire/blueCatapult_fire.png" },
  { id: "redFire", src: "images/catapults/Red/redFire/redCatapult_fire.png" }
  ];
  preload.loadManifest(manifest);
  
  stage = new Stage(canvas);
  }
  
  function gameLoop() {
      update();
      draw();
  }
  
  function update() {
  
  }
  
  function draw() {
  
  }
  
  app.oncheckpoint = function  (args) { 
      document.addEventListener("DOMContentLoaded", initialize, false);
      app.start();
  };
  </code></pre>
  
  <p>Also on a side note I'm using CreateJS if that means anything</p>