How to crop a texture using vertices?

[kraftwer1]

I’m trying to show only a part of an image. Here’s an illustration of what I’d like to achieve:

1. Let’s say I have this texture:
   

2. Now I’d like to add a path:
   

3. …and show only what’s inside that path:
   

4. 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]

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.

[kraftwer1]

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")