Размытые (прозрачные) края фигуры в canvas

[smart-create]

Добрый день. Прошу помочь разобраться с canvas, есть задача сделать несложную анимацию, вот пример

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

Какие только формулировки, я не пробовал гуглить. То ли гугл меня не понимает, то ли информации по этой теме действительно очень мало.

Заранее благодарен за любую помощь

[laimas]

https://developer.mozilla.org/en-US/...al/Compositing

[smart-create]

laimas, я изучал эту документацию, и использую композицию для того что бы сделать форму треугольника, использую при этом операцию "source-out", но я получаю просто обрезанные края, хотя по ссылке что Вы прислали, для "source-out" как раз иллюстрируется вариант такой как мне нужен, с "плавными" краями.

Я не совсем понимаю почему по ссылке именно так изобразили "source-out", я проверял не раз, он так не работает, он просто по контору обрезает и все, не какого "плавного" перехода он не делает

[Malleys]

я изучал эту документацию, и использую композицию для того что бы сделать форму треугольника, использую при этом операцию "source-out", но я получаю просто обрезанные края, хотя по ссылке что Вы прислали, для "source-out" как раз иллюстрируется вариант такой как мне нужен, с "плавными" краями.

Так у вас вас всё правильно работает! Какой треугольник вы нарисовали, так оно и вырезает! Если вы хотите, чтобы были плавные края, то нужно начать с треугольника с плавными краями, который, например, можно сделать при помощи фильтра. Ещё поменял, source-out на source-in, т. е. не что исключать, а что брать.

https://jsfiddle.net/yab0st7q/

Я не совсем понимаю почему по ссылке именно так изобразили "source-out", я проверял не раз, он так не работает, он просто по контору обрезает и все, не какого "плавного" перехода он не делает

А где вы там вычитали, что должен быть плавный переход? Кстати, если у исходного изображения инвертировать альфа-канал, то source-out можно поменять на souce-in.

Я не совсем понимаю почему по ссылке именно так изобразили

Никто ничего не изображал, это живые примеры, которые можно редактировать, например, в том же jsfiddle!

не какого "плавного" перехода он не делает

Это способы соединить две картинки вместе. Ваш ожидаемый «"плавный" переход» зависит от исходных картинок!

Там каждый пример идёт так: 🌉🌫🌁, их надо воспринимать так: 🌉+🌫=🌁

[smart-create]

Malleys, огромное человеческое спасибо!)

Как всегда решение было простым - просто применит размытые. Но я если честно не знал о том как использовать размытые в canvas только начинаю разбираться с этим

То что я писал на счет плавного перехода, который изображен в документации по композициям и обрезке - я понимаю что source-out и прочие операции, по природе своей, самостоятельно не делают каких либо плавных переходов, меня просто сбило с толку вот это изображение

Еще раз Вам огромное спасибо что все растолковали!!!