I’m trying to show only a part of an image. Here’s an illustration of what I’d like to achieve:
-
Let’s say I have this texture:

-
Now I’d like to add a path:

-
…and show only what’s inside that path:

-
If possible, I’d also like to add a contour:

Hint: I’d also like to use that path (which is really just a set of vertices) to use as my physics body (which I’m using Matter.js for).
samme
2
I think you need to create a CanvasTexture and do some clipping.
Or it may be possible with a container and geometry mask, if you also rotate the mask.
1 Like
Thanks man for pointing me to the right tools.
It works. Here’s my code. In case it helps anyone.
this.load.image("craters", "sprites/craters.png")
const cratersCanvas = this.textures.createCanvas("cratersCanvas", 100, 100)!
const cratersImgEl = this.textures
.get("craters")
.getSourceImage() as HTMLImageElement
const ctx = cratersCanvas.getContext()
ctx.beginPath()
ctx.arc(50, 50, 50, 0, window.Math.PI * 2)
ctx.clip()
cratersCanvas.draw(0, 0, cratersImgEl)
this.add.image(100, 100, "cratersCanvas")