无法绘制多个圆并在x轴上移动它们

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

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

class Circle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.speed = 1; // 圆的移动速度
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

  move() {
    this.x += this.speed;
  }
}

var circles = [
  new Circle(50, 100, 20, "red"),
  new Circle(150, 100, 30, "green"),
  new Circle(250, 100, 40, "blue")
];

function drawCircles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  for (var i = 0; i < circles.length; i++) {
    circles[i].draw();
    circles[i].move();
  }
  
  requestAnimationFrame(drawCircles);
}

drawCircles();