Is there any way to apply a mask to a canvas on my DOM element?

Phaser 3
1

I have a DOM element which holds a canvas inside, I want to put a mask to make it not visible on some positions, but I think that masks can’t be applied to DOM elements, and I haven’t found any way to apply a mask to the canvas

2

There are CSS masks, but that’s getting a little crazy.

Can you use an Image game object with a Canvas Texture instead?

3

Maybe I can use a Game Object instead, the problem is that I tried that before and the canvas was being drawn behind everything in the scene regardless of it’s order, so I made it over a DOM object to work around that problem.

4

Why not just bypass Phaser for the canvas and use context.globalCompositeOperation = “destination-out”?

5 
this.textures.createCanvas('canvas', WIDTH, HEIGHT);
const img = this.add.image(X, Y, 'canvas');
// …
this.children.bringToTop(img);
6

I had to make several changes to the code, but finally this worked, I changed it to a game object and put it on the top, (and changed the functions that depended of the dom element), thank you!