How to crop a texture using vertices?

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:
    Bildschirmfoto 2023-05-08 um 19.27.59

  2. Now I’d like to add a path:
    Bildschirmfoto 2023-05-08 um 19.28.37

  3. …and show only what’s inside that path:
    Bildschirmfoto 2023-05-08 um 19.29.18

  4. If possible, I’d also like to add a contour:
    Bildschirmfoto 2023-05-08 um 19.30.10

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

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
  .getSourceImage() as HTMLImageElement

const ctx = cratersCanvas.getContext()
ctx.arc(50, 50, 50, 0, window.Math.PI * 2)

cratersCanvas.draw(0, 0, cratersImgEl)

this.add.image(100, 100, "cratersCanvas")