title: Javascript document.getElementById("name") returning
body: <p>I've searched for the answer to my question and haven't been able to find anything that really hits it, as far as I saw.</p>
  
  <p>I have two chunks of Javascript here that I am using to create a simple 2d game in a web browser.</p>
  
  <pre><code>var myGamePiece;
  
  var game = {
  
      canvas : document.getElementById("game-screen"),
  
      start : function(){
          this.context = this.canvas.getContext("2d");
      }
  }
  
  function startGame(){
      game.start();
  }
  </code></pre>
  
  <p>And this one:</p>
  
  <pre><code>var myGamePiece;
  
  var game = {
  
      start : function(){
  
          this.canvas = document.getElementById("game-screen");
          this.context = this.canvas.getContext("2d");
  
      }
  }
  
  function startGame(){
      game.start();
  }
  </code></pre>
  
  <p>The first code snippet does not work. The <code>canvas</code> is NULL when I try to get the context. I'm wondering why? I realize why it works in the second one, well, I assume I do. It's beeing run in a function. Is the <code>canvas</code> attribute in the first one not being 'run' like it is in the second code snippet? </p>
  
  <p>Comments and tips appreciated! :D</p>