Dinamic puzzle shape mask

Phaser 3
1

Hi everybody. I need to draw an puzzle shape to use as a mask. I was abble to draw the shape using the code

var gr = this.add.graphics();
var p1 = new Phaser.Math.Vector2(300, 400);
var h1 = new Phaser.Math.Vector2(400, 200);
var h2 = new Phaser.Math.Vector2(700, 200);
var p2 = new Phaser.Math.Vector2(800, 400);
var h3 = new Phaser.Math.Vector2(600, 300);
var h4 = new Phaser.Math.Vector2(200, 600);

var path = new Phaser.Curves.Path(300,400)
path.cubicBezierTo(h1, h2, p2);
path.cubicBezierTo(h3, h4, p1);

gr.beginPath();
gr.lineStyle(1, 0x00ff00, 1);
gr.fillStyle(0xff0000, 1);
path.draw(this.gr);

The graphic is not been filled, just the stroke appears.
How could I fill this shape to use as a mask?

2

It’s something like

gr.fillPoints(path.getPoints(N), true, true);

where N is the resolution.

3

Thanks samme.