# help with filling in a circle with an image

**URL:** <https://phaser.discourse.group/t/help-with-filling-in-a-circle-with-an-image/8780>\
**Category:** Phaser 3\
**Created:** [February 1, 2021, 9:34am UTC](https://phaser.discourse.group/t/help-with-filling-in-a-circle-with-an-image/8780 "2021-02-01T09:34:57Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![manoveio](https://avatars.discourse-cdn.com/v4/letter/m/c6cbf5/32.png) [@manoveio](https://phaser.discourse.group/u/manoveio)\
**Post date:** [February 1, 2021, 9:34am UTC](https://phaser.discourse.group/t/help-with-filling-in-a-circle-with-an-image/8780/1 "2021-02-01T09:34:57Z")

</div>

Hi, I’m new and I don’t know how to fill in a circle with an image …  
I know how to do it with pure javascript, but with Phaser I couldn’t do it.  
I am very grateful for the help!

code with pure javascript:  
var canvas = document.getElementById(‘canvas’);

var ctx = canvas.getContext(‘2d’);

var img = new Image();

img.src = ‘[https://phaser.io/images/logo/logo-download-vector.png](https://phaser.io/images/logo/logo-download-vector.png)’;

img.onload = function() {

var pattern = ctx.createPattern(img, ‘repeat’);

ctx.fillStyle = pattern;

ctx.beginPath();

ctx.arc(300, 175, 150, 0, 2 \* Math.PI);

ctx.fill();

};

Outcome:

 ![descarga (1)](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/a4b9ece5822cf4f19560acb38a62c4caf65b97cb.png)

---

<div class="post-metadata">

**Author:** ![malahaas](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/malahaas/32/4735_2.png) [@malahaas](https://phaser.discourse.group/u/malahaas)\
**Post date:** [February 1, 2021, 4:00pm UTC](https://phaser.discourse.group/t/help-with-filling-in-a-circle-with-an-image/8780/2 "2021-02-01T16:00:44Z")

</div>

Check out this: [Phaser 3](http://labs.phaser.io/view.html?src=src%5Cgame%20objects%5Ctile%20sprite%5CExample.js)  
That should give you tiled backgrounds pretty easily.  
Then you could use setMask: [Phaser 3 API Documentation - Class: TileSprite](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.TileSprite.html#setMask__anchor)

Does that work for your needs?