如何在ContextMenu中从画布中删除椭圆？

// 在画布上绘制椭圆的函数
function drawEllipse(ctx, x, y, radiusX, radiusY) {
  ctx.beginPath();
  ctx.ellipse(x, y, radiusX, radiusY, 0, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
}

// 定义画布和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义椭圆的初始坐标和半径
var ellipse = {
  id: "ellipse1",
  x: 100,
  y: 100,
  radiusX: 50,
  radiusY: 30
};

// 绘制初始椭圆
drawEllipse(ctx, ellipse.x, ellipse.y, ellipse.radiusX, ellipse.radiusY);

// 为画布添加右击事件监听器
canvas.addEventListener("contextmenu", function(event) {
  event.preventDefault(); // 阻止默认的右击菜单弹出

  var mouseX = event.clientX - canvas.offsetLeft;
  var mouseY = event.clientY - canvas.offsetTop;

  // 判断鼠标右击位置是否在椭圆内部
  if (
    mouseX > ellipse.x - ellipse.radiusX &&
    mouseX < ellipse.x + ellipse.radiusX &&
    mouseY > ellipse.y - ellipse.radiusY &&
    mouseY < ellipse.y + ellipse.radiusY
  ) {
    // 删除椭圆
    ctx.clearRect(
      ellipse.x - ellipse.radiusX,
      ellipse.y - ellipse.radiusY,
      2 * ellipse.radiusX,
      2 * ellipse.radiusY
    );
  }
});