Как нацепить эвент на объект класса

Решил сделать объект по шаблону класса, на который можно было бы тыкать(отслеживать евент), но у меня не хватает знаний в js. В чем заключается моя проблема в данном скрипте?

Листенер просто не видит картинку, по которой нужно нажать.

class test {
  constructor(x, y, w, h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.image = null;
  }
  draw(){
        this.image = new Image();
        this.image.src = '. . .';
        ctx.drawImage(this.image, this.x, this.y, this.w, this.h);
  }
    setPos(x,y){
        this.x += x;
        this.y += y;
    }
    attack(){
        this.image.addEventListener('click',function(e){
            console.log(1337);
        });
    }
}

Ответы (1 шт):

Автор решения: Евгений Платов

Так не работает. Если вы рисуете Image на канве, вам нужно вешать обработчик на canvas. Затем получать координаты клика и в ручную проверять попали вы в image или нет. Лучше использовать какую нибудь библиотеку поверх канвы, типа PixiJS

→ Ссылка