Не получается. Фон - объект.

[AlexSeamen]

Есть холст голубой, черный квадрат (фон), кольцо зеленое с прорезью/разрывом.Внутренняя часть кольца и прорезь должны быть на фоне черного квадрата прозрачными. Перетаскиваю мышью кольцо и... Должен быть виден черный фон, квадрат. А видно холст. Рентген какой-то... . Приложил весь файл html. Чтобы посмотреть страницу.
Что не так?

<script>
    const canvas = document.getElementById('circleCanvas');
    const ctx = canvas.getContext('2d');

    // Настройки кольца
    const outerRadius = 150 / 2; // Внешний радиус кольца (150px диаметр)
    const ringWidth = 30; // Ширина кольца (50px)
    const innerRadius = outerRadius - ringWidth; // Внутренний радиус кольца
    const breakWidth = 30; // Ширина разрыва
    const breakHeight = 70; // Высота разрыва
    let ringX = canvas.width / 2; // Начальная позиция кольца по оси X
    let ringY = canvas.height / 2; // Начальная позиция кольца по оси Y
    let isDragging = false; // Флаг, указывающий, что кольцо перетаскивается

    // Функция для рисования кольца
    function drawGreenRing() {
      ctx.save();
      ctx.beginPath();
      ctx.arc(ringX, ringY, outerRadius, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = 'green';
      ctx.fill();

      // Вырезаем прозрачную внутреннюю часть кольца
      ctx.globalCompositeOperation = 'destination-out';
      ctx.beginPath();
      ctx.arc(ringX, ringY, innerRadius, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = 'black';
      ctx.fill();

      // Вырезаем разрыв в кольце (прорезь)
      const breakX = ringX - breakWidth / 2; // Разрыв по горизонтали, чтобы он был центрирован
      const breakY = ringY + outerRadius - breakHeight / 2; // Разрыв по вертикали, снизу кольца

      // Режим вычитания для создания разрыва
      ctx.beginPath();
      ctx.rect(breakX, breakY, breakWidth, breakHeight);
      ctx.closePath();
      ctx.fillStyle = 'black'; // Цвет прорези черный, чтобы соответствовать черному кругу
      ctx.fill();

      // Восстановить обычный режим рисования
      ctx.globalCompositeOperation = 'ource-over';
      ctx.restore();
    }

    // Функция для рисования черного квадрата
    function drawBlackSquare() {
      ctx.fillStyle = 'black';
      ctx.fillRect(canvas.width / 2 - 50, canvas.height / 2 + 50, 100, 100);
    }

    // Обработчик событий для перетаскивания кольца
    canvas.addEventListener('mousedown', (e) => {
      const mouseX = e.offsetX;
      const mouseY = e.offsetY;

      // Проверяем, попал ли клик в кольцо
      const distX = mouseX - ringX;
      const distY = mouseY - ringY;
      const distance = Math.sqrt(distX * distX + distY * distY);

      if (distance <= outerRadius) {
        isDragging = true; // Начинаем перетаскивание
      }
    });

    // Обработчик событий для перетаскивания кольца
    canvas.addEventListener('mousemove', (e) => {
      if (isDragging) {
        ringX = e.offsetX;
        ringY = e.offsetY;
        redrawCanvas();
      }
    });

    // Завершаем перетаскивание
    canvas.addEventListener('mouseup', () => {
      isDragging = false;
    });

    // Функция для очистки и перерисовки холста
    function redrawCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBlackSquare(); // Рисуем черный квадрат
      drawGreenRing(); // Рисуем кольцо
    }

    // Инициализация рисования
    drawBlackSquare(); // Рисуем черный квадрат
    drawGreenRing(); // Рисуем кольцо
  </script>