通过JavaScript使用画布，我如何让一个圆移动到我点击的地方？

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

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

var x = canvas.width / 2; // 初始圆的水平位置
var y = canvas.height / 2; // 初始圆的垂直位置
var radius = 50; // 圆的半径

function drawCircle() {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

canvas.addEventListener("click", moveCircle);

function moveCircle(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left; // 获取相对于画布左上角的水平坐标
  var mouseY = event.clientY - rect.top; // 获取相对于画布左上角的垂直坐标

  // 调用移动圆的函数
  animateCircle(mouseX, mouseY);
}

var targetX, targetY;
var speed = 2; // 圆移动的速度

function animateCircle(targetX, targetY) {
  var dx = targetX - x; // 计算水平方向的移动距离
  var dy = targetY - y; // 计算垂直方向的移动距离

  var distance = Math.sqrt(dx * dx + dy * dy); // 计算圆心到目标点的距离

  var vx = (dx / distance) * speed; // 计算水平方向的速度向量
  var vy = (dy / distance) * speed; // 计算垂直方向的速度向量

  function update() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 更新圆的位置
    x += vx;
    y += vy;

    // 绘制圆
    drawCircle();

    // 继续动画循环
    if (Math.abs(targetX - x) > speed || Math.abs(targetY - y) > speed) {
      requestAnimationFrame(update);
    }
  }

  // 启动动画循环
  update();
}