Как очистить область в форме многоугольника в элементе canvas?

Question

Я использовал функцию clearRect, но не увидел эквивалента для полигонов. Я наивно пытался:

ctx.fillStyle = 'transparent';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

Но это просто рисует прозрачную область и не влияет на то, что там уже есть. Есть ли способ очистить полигональные области внутри элемента canvas?

Answer 1

Вы можете использовать композитинг с операцией, установленной на 'destination-out' для этого:

ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

Пример:

Попробуйте это на jsFiddle