# How to create circle image in container or rexui sizer

**URL:** <https://phaser.discourse.group/t/how-to-create-circle-image-in-container-or-rexui-sizer/3564>\
**Category:** Phaser 3\
**Created:** [August 25, 2019, 1:19am UTC](https://phaser.discourse.group/t/how-to-create-circle-image-in-container-or-rexui-sizer/3564 "2019-08-25T01:19:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![deadwind88](https://avatars.discourse-cdn.com/v4/letter/d/ac91a4/32.png) [@deadwind88](https://phaser.discourse.group/u/deadwind88)\
**Post date:** [August 25, 2019, 1:19am UTC](https://phaser.discourse.group/t/how-to-create-circle-image-in-container-or-rexui-sizer/3564/1 "2019-08-25T01:19:31Z")

</div>

Hi there.

First, I’m trying to make an FB Leader board like this image [https://prnt.sc/owv7q4](https://prnt.sc/owv7q4). I captured it from Caro - an instant game.

And I’m new in Phaser 3.

I know how to create circle image by using mask. But my problem is i can’t use mask for a child in a container. I spent whole day to search solution on GG

Let me tell you how i make Leader board.

I use greate UI plugin of Rex, Scroll panel contains a sizer, that sizer contain many containers as row of rank.

In container i want to create an circle image and i didn’t success with mask

Then i changed my solution to using sizer instead of container. Failed again.

Please help me find better solution.

If i need to post my code here, please tell me.

Thanks so much

 ![Screenshot_47](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5c310fc3628965deb5be0b4af9342469de996231.png)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [August 25, 2019, 2:28am UTC](https://phaser.discourse.group/t/how-to-create-circle-image-in-container-or-rexui-sizer/3564/2 "2019-08-25T02:28:41Z")

</div>

Scrollable panel controls the mask of children. Thus the image’s circle mask will be replaced by scrollable panel’s mask.

BTW, p3 seems does not support _a mask masked by another mask_, or _a game object masked by more then 1 mask_. Therefore… I guess circle masked image won’t work.

---

<div class="post-metadata">

**Author:** ![deadwind88](https://avatars.discourse-cdn.com/v4/letter/d/ac91a4/32.png) [@deadwind88](https://phaser.discourse.group/u/deadwind88)\
**Post date:** [August 25, 2019, 6:06am UTC](https://phaser.discourse.group/t/how-to-create-circle-image-in-container-or-rexui-sizer/3564/3 "2019-08-25T06:06:33Z")

</div>

Thank for your reply?  
So, how i can create a circle image?  
No way?

As i know, with Phaser 2, we can create a circle bitmapdata then fill it by an image to make a circle image.  
Does Phaser 3 support same feature?

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [August 25, 2019, 7:56am UTC](https://phaser.discourse.group/t/how-to-create-circle-image-in-container-or-rexui-sizer/3564/4 "2019-08-25T07:56:32Z")

</div>

Create circle mask at bitmapdata (canvas) is a solution. You might try to create a circle masked image by [canvas texture](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/canvas-texture/).

Or I could add another plugin to create this kind of image (without using mask). Here is a [demo](https://codepen.io/rexrainbow/pen/XWrMKBY?editors=0010), [document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/circlemaskimage/).