How to clip and mask sprites in Pixi.js like `clip-path` in CSS

Question

In CSS, we can mask/clip a square image inside a shape with clip-path, for example, clip-path: ellipse(60px 40px at 75px 30px); clips the image to an ellipse.

How can I clip a sprite into an ellipse in Pixi.js?

Answer 1

Just draw a PIXI.Graphics with the specified dimension, then assign it to sprite.mask.

const sprite = PIXI.Texture.fromImage('image-file')
const mask = new PIXI.Graphics()
mask.beginFill(0x000000)
mask.drawEllipse(75, 30, 60, 40)
sprite.mask = mask