Я пытаюсь изменить размер элемента canvas с помощью метода resizeCanvas() в ответ на событие изменения размера.Канва изменяет размеры, если я вызываю метод класса напрямую, но я получаю следующую ошибку при последующих вызовах через обработчик событий: Uncaught TypeError: Cannot set property 'width' of undefined
Вот мой тестовый код:
class CanvasManager {
constructor(canvasID) {
this.canvas = document.getElementById(canvasID);
this.context = this.canvas.getContext('2d');
}
resizeCanvas() {
this.canvas.width = window.innerWidth-30;
this.canvas.height = window.innerHeight-30;
window.scrollTo(0, 0);
}
}
let canvasManager = new CanvasManager('controller');
canvasManager.resizeCanvas();
window.addEventListener("resize", canvasManager.resizeCanvas);
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="controller" style="border-style: solid;" width="300px" height="300px"></canvas>
<script src="./test.js"></script>
</body>
</html>
Есть идеи, почему я получаю ошибку?
edit: Как указывает Heretic Monkey, эта проблема похожа на 'this' не определено в методах класса JavaScript .Однако, как новый кодер, я бы никогда не понял, что оба вопроса связаны между собой.Я думаю, что этот пост должен остаться на тот случай, если у кого-то еще есть подобная проблема, которая не может понять основную проблему.