如何使用ES6类在画布中添加事件侦听器和移动对象？

<canvas id="myCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

class MyObject {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  draw() {
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

const myObject = new MyObject(50, 50, 100, 100);
myObject.draw();

canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const mouseX = event.clientX - rect.left;
  const mouseY = event.clientY - rect.top;

  if (myObject.x < mouseX && mouseX < myObject.x + myObject.width &&
      myObject.y < mouseY && mouseY < myObject.y + myObject.height) {
    console.log('Object clicked!');
  }
});

function moveObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  myObject.x += 1;
  myObject.draw();

  requestAnimationFrame(moveObject);
}

moveObject();