Не могу рисовать прямоугольники на холсте HTML, используя слушатели Canvas Event ⇐ Html

[Anonymous]

Я рисую прямоугольник внутри холста, и я получаю контекст как функциональный аргумент, как вы можете видеть в функции рисования. Когда я пытаюсь нарисовать прямоугольник, используя контекст, он работает нормально, но когда у Canvas есть слушатель событий, и я пишу логику для рисования на перемещении мыши, он не работает. < /P>
Нарисуйте Функция < /p>

Код: Выделить всё

  async draw(
ctx: OffscreenCanvasRenderingContext2D,
{ width, height }: { width: number; height: number }
) {
this.canvas = document.getElementById("player") as HTMLCanvasElement;
this.ctx = ctx;
this.ctx.globalCompositeOperation = "source-over";
this.ctx.fillStyle = "red";
this.ctx.fillRect(0, 0, 100, 100);

for (let i = 0; i < 100; i++) {
this.ctx.fillStyle = "red";
this.ctx.fillRect(100 + i, 200 + i, 100, 100);
}

console.log("Context draw", this.ctx);
this.addEventListeners();
}
< /code>
Событие перемещения мыши < /p>
  handleMouseMove( event: MouseEvent) {
if (!this.drawing) return;

const rect = this.canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;

this.ctx.fillStyle = "red";
this.ctx.fillRect(x, y, 50, 50); // Draw rectangle
console.log("Mouse move at:", x, y, this.ctx);
}

Здесь вы можете увидеть изображение Дрю в разделе цикла
< /p>

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-listners