# Display square image as circle image

**URL:** <https://discourse.processing.org/t/display-square-image-as-circle-image/28735>\
**Category:** Coding Questions\
**Created:** [March 22, 2021, 5:16pm UTC](https://discourse.processing.org/t/display-square-image-as-circle-image/28735 "2021-03-22T17:16:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bas950](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bas950/32/10749_2.png) [@Bas950](https://discourse.processing.org/u/Bas950)\
**Post date:** [March 22, 2021, 5:16pm UTC](https://discourse.processing.org/t/display-square-image-as-circle-image/28735/1 "2021-03-22T17:16:45Z")

</div>

So I load a square image, but I want it displayed as a circle image, how could I do this easily? (like just cut of the corners with transparency, width stay the same but just rounded)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 22, 2021, 5:49pm UTC](https://discourse.processing.org/t/display-square-image-as-circle-image/28735/2 "2021-03-22T17:49:41Z")

</div>

perhaps mask is what you are looking for  
[https://p5js.org/reference/#/p5.Image/mask](https://p5js.org/reference/#/p5.Image/mask)