title: The Image doesn't show up on the Canvas
body: <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Game&lt;/title&gt;
  &lt;script src="http://code.createjs.com/easeljs-0.4.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id ="beeld"&gt;
  &lt;canvas id ="stageCanvas" width="1024" height="576"&gt;
  &lt;script src ="javascript.js"&gt;&lt;/script&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my Html</p>
  
  <pre><code>//Javascript Document
  var canvas = document.getElementById('stageCanvas');
  var stage = new Stage(canvas);
  
  var Background;
  var imgBackground = new Image();
  imgBackground.src ="images/bg.png";
  
  Background = new Bitmap(imgBackground);
  Background.x = 0
  Background.y = 0
  stage.addChild(Background);
  stage.update();
  </code></pre>
  
  <p>And that's my js.</p>
  
  <p>The image is 1024 by 576, so it should be fullscreen. The original is 2048 by 576. I was planning to do like the background would slide to left and repeat it self when it gets to the end. </p>
  
  <p>So my question is, why doesnt the image show up on the canvas.</p>
  
  <p>I'm a very new to this, so I'm sorry if I'm asking such an easy question.</p>
  
  <p>PS: If I inspect the HTML, it DOESN'T show any errors and it DOES show that the image is being loaded. It's just not.. drawn.. I guess.
  I'm getting frustrated, because I'm stuck here for a couple hours already.</p>
  
  <p><strong>I FOUND A WORKING CODE</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Easel simple game&lt;/title&gt;
  &lt;script src="http://code.createjs.com/easeljs-0.4.2.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var canvas;
  var stage;
  var bg;
  var score;
  var ghost;
  
  function init() {
      canvas = document.getElementById("StageCanvas");
      stage = new Stage(canvas);
      score = 0;
  
  
      bg = new Image();
      bg.src = "img/bg.png";
      bg.onload = setBG;
  }
  
  function setBG(event){
      var bgrnd = new Bitmap(bg);
      stage.addChild(bgrnd);
      stage.update();
  }
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="init();"&gt;
      &lt;canvas id="StageCanvas" width="1240" height="576"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>By the way this code is the work for someone else, so I don't take any credit.</p>
  
  <p>This seems to work perfectly. But once I remove the 
  <code>bg = new Image();
     bg.src = "img/bg.png";
     bg.onload = setBG;
  </code> it stops working.</p>