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).
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.
Thanks man for pointing me to the right tools.
It works. Here’s my code. In case it helps anyone.
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")