HTML5 canvas + javascript class = error

Question

Я пытаюсь написать класс javascript для области, содержащей 2 элемента холста, 1 для фона и 1 для переднего плана. Но когда я нажимаю на холсте я получаю сообщение об ошибке:

«неперехваченным TypeError: Не удается прочитать свойство„DrawImage“неопределенных»

Любая помощь будет оценена ...

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 > 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(); 
} 

Answer 1

Проблема заключается в том, что this не то, что вы думаете, это в обработчике щелчка, что означает, что this.context является undefined и undefined не метод drawImage(). Попробуйте использовать the .bind() method:

this.canvas.addEventListener("mousedown", this.onClick.bind(this), false); 

... чтобы заставить this к значению, которое нужно. Или вы можете сделать что-то вроде этого:

function GAMEAREA(canvasElement, bgElement) 
{ 
    var self = this; 
    ...  
    this.onClick = function(e) 
    { 
     self.context.drawImage(self.pawnImg, 0, 0); 
    };  
    ... 
} 

Значение this внутри функции зависит от того, как называется эта функция. Более подробную информацию о том, как установить this, можно получить по адресу: MDN.

Answer 2

Вы» проблема заключается в этих строках:

this.canvas = document.getElementById(canvasElement); 
this.context = this.canvas.getContext("2d"); 

this.context не определено. Убедитесь, что указанные строки возвращают правильные объекты.