在HTML5画布中对对象使用eventListeners (无法在函数中获取对象属性)

// 创建画布对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 创建对象
var myObject = {
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  color: "red",
  
  // 绘制对象
  draw: function() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
};

// 绑定事件处理函数
canvas.addEventListener("click", function(event) {
  // 在闭包中保存对象属性
  var x = myObject.x;
  var y = myObject.y;
  var width = myObject.width;
  var height = myObject.height;
  
  // 判断点击位置是否在对象范围内
  if (event.offsetX >= x && event.offsetX <= x + width &&
      event.offsetY >= y && event.offsetY <= y + height) {
    console.log("Object clicked!");
  }
});

// 绘制对象
myObject.draw();