Canvas 'Тип изображения в массиве объекта Javascript

Question

Добрый день, Мне нужна помощь с моим кодом, я пытаюсь закодировать карту в холсте с помощью Hearts, которую пользователь может щелкнуть, но я хочу, чтобы эти сердца в массив, чтобы отобразить их с циклом for.

Мой кода здесь:

var canvas = document.getElementById("mapC"); 
     var ctx = canvas.getContext("2d"); 

     var Heart = function(link, posX, posY) { 
      this.link = link; 
      this.posX = posX; 
      this.posY = posY; 
      this.pic = new Image(); 
      this.pic.addEventListener("load", function() { 
       ctx.drawImage(this.pic, this.posX, this.posY); 
      }, false); 
      this.pic.src = "heart.png"; 

     } 
     Heart.prototype.heartClick = function() 
     { 
       document.location.href= this.link; 
     } 

     var heartsArray = new Array(); 
     heartsArray.push(new Heart("this", 40, 40)); 

И проблема в том, что

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' 

Но мое «this.pic» Изображение типа отображаемого в массиве, и я не нахожу ошибку , пожалуйста помогите.

Answer 1

В вашей функции обратного вызова this, указывая на глобальный объект window. Вы должны сохранить ссылку для this на новую переменную, а затем вы можете ее использовать.

var self = this; 
this.pic.addEventListener("load", function() { 
    ctx.drawImage(self.pic, self.posX, self.posY); 
}, false);