如何在画布上切换圆圈？

// 创建画布
var canvas = document.createElement('canvas');
canvas.width = 400;  // 设置画布宽度
canvas.height = 400; // 设置画布高度
document.body.appendChild(canvas);

// 获取画布上下文
var ctx = canvas.getContext('2d');

// 绘制圆圈
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';  // 设置填充颜色
ctx.fill();
ctx.closePath();

// 监听鼠标点击事件
canvas.addEventListener('click', function(event) {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制另一个圆圈
  ctx.beginPath();
  ctx.arc(200, 200, 100, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';  // 设置填充颜色
  ctx.fill();
  ctx.closePath();
});

// 记录圆圈颜色状态
var circleColor = 'blue';

// 监听鼠标点击事件
canvas.addEventListener('click', function(event) {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 切换圆圈颜色
  if (circleColor === 'blue') {
    circleColor = 'red';
  } else {
    circleColor = 'blue';
  }
  
  // 绘制圆圈
  ctx.beginPath();
  ctx.arc(200, 200, 100, 0, 2 * Math.PI);
  ctx.fillStyle = circleColor;  // 设置填充颜色
  ctx.fill();
  ctx.closePath();
});