# Problem with mask of image

**URL:** <https://phaser.discourse.group/t/problem-with-mask-of-image/14845>\
**Category:** Phaser 3\
**Created:** [October 15, 2024, 6:09pm UTC](https://phaser.discourse.group/t/problem-with-mask-of-image/14845 "2024-10-15T18:09:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gamedevshrimp](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gamedevshrimp/32/8252_2.png) [@gamedevshrimp](https://phaser.discourse.group/u/gamedevshrimp)\
**Post date:** [October 15, 2024, 6:09pm UTC](https://phaser.discourse.group/t/problem-with-mask-of-image/14845/1 "2024-10-15T18:09:43Z")

</div>

Hello, dear community! I need your help with making a mask of an image. Finally, I want to achieve mask animation [like that](https://i.gyazo.com/0952ab5d2265f7d0fd4b29cfbb2c53fa.gif)

And I made it

```javascript
this.rewardImage = scene.add.image(0, 0, image);
this.rewardImageCover = scene.add.image(0, 0, image).setTint(0xff0000);
this.maskRect = scene.add
	.rectangle(0, 0, 880, 256, 0x000000)
	.setVisible(false);
this.add([this.rewardImage, this.rewardImageCover, this.maskRect]);

let mask = this.maskRect.createGeometryMask();

this.rewardImageCover.setMask(mask);

scene.add.existing(this);

```

but the problem is that I made it in a container. The container was animated, and its position was changed. So, the mask does not cover the image

Any suggestions on how to fix this?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 15, 2024, 7:05pm UTC](https://phaser.discourse.group/t/problem-with-mask-of-image/14845/2 "2024-10-15T19:05:27Z")

</div>

> [@Faking a mask inside a container](https://phaser.discourse.group/t/faking-a-mask-inside-a-container/14153):
>
> As of Phaser v3.80, masks always render in global coordinates, so if you put a mask source inside a container, you will get the wrong effect. A workaround is to put an invisible game object inside the container, then copy its global transform values to the real mask source outside the container. this.events.on("prerender", () =\> { const { tx, ty, scaleX, scaleY, rotationNormalized } = maskProxy.getWorldTransformMatrix(); mask .setPosition(tx, ty) .setScale(s…

---

<div class="post-metadata">

**Author:** ![gamedevshrimp](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gamedevshrimp/32/8252_2.png) [@gamedevshrimp](https://phaser.discourse.group/u/gamedevshrimp)\
**Post date:** [October 15, 2024, 7:53pm UTC](https://phaser.discourse.group/t/problem-with-mask-of-image/14845/3 "2024-10-15T19:53:48Z")

</div>

As always, thank you!