|
В вашем коде есть несколько ошибок, которые приводят к тому, что прозрачные области кольца показывают фон холста, а не черный квадрат.
Ошибки:
globalCompositeOperation = 'destination-out' работает неправильно
Вы сначала заливаете кольцо зеленым (fillStyle = 'green'), а потом пытаетесь вырезать внутреннюю часть и разрыв с destination-out, что делает их прозрачными. Проблема в том, что если прозрачные пиксели находятся выше непрозрачных, то они не отображают нижележащие объекты (то есть черный квадрат), а показывают фон холста.
Вы не восстанавливаете globalCompositeOperation правильно
У вас написано ctx.globalCompositeOperation = 'ource-over'; (ошибка в слове "source-over" — пропущена буква "s").
Порядок отрисовки
Вы сначала рисуете черный квадрат, потом кольцо, но если прозрачные области не работают как нужно, черный квадрат просто перерисовывается.
Возможно я пропустил что-то ещё, но это то, что бросилось в глаза
|