如何使用键盘输入使canvas中的对象基于其x和y坐标移动？

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var object = {
  x: 50,
  y: 50
};

document.addEventListener("keydown", function(event) {
  var keyCode = event.keyCode;
  
  // 根据按键的不同更新对象的坐标
  if (keyCode === 37) { // 左箭头键
    object.x -= 10;
  } else if (keyCode === 38) { // 上箭头键
    object.y -= 10;
  } else if (keyCode === 39) { // 右箭头键
    object.x += 10;
  } else if (keyCode === 40) { // 下箭头键
    object.y += 10;
  }
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.fillRect(object.x, object.y, 50, 50); // 绘制对象
  
  requestAnimationFrame(draw); // 循环调用绘制函数
}

draw(); // 调用绘制函数开始绘制