title: HTML5 canvas + javascript class = error
body: <p>I'm trying to write a javascript class for an area that contains 2 canvas elements, 1 for background and 1 for foreground.
  But when i click on canvas i get the error:</p>
  
  <p>"Uncaught TypeError: Cannot read property 'drawImage' of undefined"</p>
  
  <p>Any help would be appreciated...</p>
  
  <pre><code>function GAMEAREA(canvasElement, bgElement)
  {
      this.canvas = document.getElementById(canvasElement);
      this.context = this.canvas.getContext("2d");
      this.bgCanvas = document.getElementById(bgElement);
      this.bgContext = this.bgCanvas.getContext("2d");
      this.pawnImg = document.getElementById("pawnImg");
  
      this.init = function()
      {
          this.adjustSize();
          this.canvas.addEventListener("mousedown", this.onClick, false);
      };
  
      this.onClick = function(e)
      {
          this.context.drawImage(this.pawnImg, 0, 0);
      };
  
      this.adjustSize = function()
      {
          this.canvas.height = window.innerHeight - ($("#headerDiv").outerHeight() +     $("#footerDiv").outerHeight());
          if (this.canvas.height &gt; window.innerWidth) {
              this.canvas.height = window.innerWidth;
              this.canvas.width = this.canvas.height;
          }
          else this.canvas.width = this.canvas.height;
          this.bgCanvas.height = this.canvas.height;
          this.bgCanvas.width = this.canvas.width;
          this.bgCanvas.style.display = "block";
          this.canvas.style.display = "block";
      };
  
      this.init();
  }
  </code></pre>