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

Question

[Даниил Попов]

Есть ли встроенные методы скругления краев картинки на JS (аналогично border-radius в css) при выводе картинки на canvas? Какие готовые реализации подобного вы встречали?

Answer 1

[twobomb]

Вот написал функцию для скругления картинок, аналогичная drawImage. Только первый параметр это context ,а последний радиус скругления. Тут пример.

Comments

[Даниил Попов]

Спасибо за хороший пример, на MDN очень скупая статья про clip()

Answer 2

[Даниил Попов]

На основе ответов я написал метод для CanvasRenderingContext2D рисующий картинки со скругленными углами
github

Answer 3

[Олег]

mask
context.clip()

Comments

[Даниил Попов]

С context.clip() понял, а mask нет. Вы могли бы объяснить чуть менее кратко

[Олег]

Даниил Попов, Не парься, это просто как clippath в svg
Еще вариант https://jsfiddle.net/ot3gLcmL/

[Даниил Попов]

Олег, спасибо за пример, так значительно понятнее