Как заполнить «противоположную» фигуру на холсте?

Допустим, у меня есть круг (дуга) на холсте HTML5. Я могу просто заполнить его вот так:

ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

Это работает. Однако как заполнить противоположную область? Теперь он белый с черным кругом, но я бы хотел, чтобы он был по линиям следующего изображения (на котором белый - цвет фона, а черный - цвет заливки):

Я знаю, что могу просто использовать черный фон и нарисуйте белый круг, но фон может быть любым (там раньше рисовались всевозможные вещи, поэтому просто поменять местами цвета невозможно).

Другое дело, что нужно заливать не весь холст, а скорее квадрат с перечеркнутым кружком.

Я думал о globalCompositeOperation , но, похоже, это не соответствует моим потребностям, поскольку ни один из них не действует в соответствии с тем, что мне нужно.

Итак, как можно Я выполняю заполнение «противоположной» области, как на изображении в примере?