Как вырезать в path прозрачное отверстие при помощи того же path?

Question

[Alex]

Есть canvas на нём рисуется фоновое изображение при помощи drawImage потом рисуется path, а потом еще один path который находится внутри первого. Как второй path вычесть из первого, чтобы в области второго path была часть фонового изображения?

Изображение для понимания:

Answer 1

[Aetae]

Просто закрываешь один path и рисуешь дырку в продолжение.
Примерно так:


На canvas это можно сделать с помощью параметра fill evenodd:

Comments

[Alex]

В SVG я понимаю как это работает. Вопрос как это сделать в Canvas? Если я рисую один path потом другой path внутри дырки не будет даже если я против часовой буду рисовать второй path.

[Ivan Ustûžanin]

Alex, так значит не нужно рисовать один path, а потом другой path, а всё в одном path

[Aetae]

Alex, обновил ответ.
Ivan Ustûžanin, почему же, можно, просто надо поменять режим заливки по умолчанию.:)

[Ivan Ustûžanin]

Aetae, как я понял автор вопроса делает по два раза beginPath() и fill() и ожидает, что второй fill() будет делать дырку в первом, что работать никогда не будет, если конечно во втором fill() не сделать заливку картинкой фона и то с кучей оговорок

[Alex]

Aetae, спасибо понял теперь как это работает! Еще нашел выход это вместо команд канваса генерировать просто последовательность как в SVG (МX1 Y1 X2 Y2 ..... z) и скармливать в Path2D и потом ctx.fill(path2d)

Answer 2

[GreatRash]

Alex, это называется булевы операции над кривыми Безье. Самому сделать довольно трудно. Я знаю парочку библиотек, которые это умеют:

Paper.js (тут можно позырить пример работы) - это старинная либа, кажись код в ней портировали с Adovbe Illustrator. Мой антивирус ругается при переходе по ссылке потому что у сайта сертификат (https) протух.

g.js (пример использование булевых операций) - более новая либа, она меньше заточена под рисование на канвасе, а больше под математику.