title: JavaScript drawImage() not working
body: <p>Getting into JS game development but bumped into a little problem. The image won't draw. It loads fine, no errors in the console, but it just won't display. What am I missing?</p>
  
  <p><b>JS</b></p>
  
  <pre><code>var Game = {
  characterSpeed: 2,
  characterHorizontalSpeed: this.characterSpeed,
  characterVerticalSpeed: this.characterSpeed,
  characterX: 400,
  characterY: 500,
  mouseX: 0,
  mouseY: 0,
  gameRunning: false,
  debug: true,
  characterImg: '',
  context: '',
  
  init: function() {
      $('#game').mousemove(function(event) {
          Game.mouseX = event.pageX;
          Game.mouseY = event.pageY;
      });
  
      Game.context = document.getElementById('game').getContext('2d');
  
      Game.loadImages();
      Game.game();
  },
  
  loadImages: function() {
      Game.characterImg = new Image;
      Game.characterImg.src = 'images/character.png';
  
      Game.characterImg.onload = function() {
          Game.context.drawImage(Game.characterImg, 400, 500);
      }
  },
  }
  
  $(function() {
  Game.init();
  });
  </code></pre>
  
  <p><b>HTML</b></p>
  
  <pre><code>    &lt;div id="inner"&gt;
          &lt;canvas id="game" style="background: white; width: 800px; height: 500px;"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  </code></pre>