Как нарисовать круг только в определенной области?

Question

Итак, у меня есть круг, который рисуется на холсте, он меняет размер в соответствии с настройкой. Однако, если настройка установлена ​​слишком высоко, круг больше, чем зарезервированная область, и перекрывает другие вещи на холсте.

В настоящее время я удаляю область вокруг коробки после ее намотки, но это создает трудности. Мне в основном приходится рисовать все вокруг дважды, потому что мне нужен круг, который нужно нарисовать последним. Это затрудняет реализацию действий кликов в указанной области, поскольку клик регистрируется дважды.

TL; RD: Как я могу замаскировать часть круга до Я рисую его на холсте?

Answer 1

Для этого вы можете использовать функцию clip().

 context.rect(50,50,200,200);//the area in which the circle is to be drawn 
     context.save();//saved context so it can be restored later 
     context.clip(); 
     //now draw your circle 
     context.restore(); //remove the clip 

Только площадь внутри данного прямоугольника нарисована.

Это good tutorial по данной теме.