Solution 1 :

The mask shouldn’t be a child of the container. You’re creating a sprite, adding it as a visible child, and then using the sprite’s boundary rectangle as a mask.

Remove the addChild() call, and it will mask properly, but in addition, you should set the container mast to a PIXI.Rectangle instead of a sprite, if all you’re doing is masking a rectangular area.

Solution 2 :

I know it is late, but this can do the trick

const app = new PIXI.Application({ antialias: true, backgroundColor : 0x1099bb });

let square = new PIXI.Graphics();
square.drawRect(0, 0, 200, 150);

let circle = new PIXI.Graphics();
circle.beginFill(0x66ffcc, 1);
circle.drawCircle(90, 75, 70);

square.mask = transparentmask(circle);

function transparentmask(circle){
//fresh white sprite
let sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.tint = 0xffffff;
sprite.x = 0;
sprite.y = 0;
sprite.width = 200;
sprite.height = 150;
//this will do the trick
sprite.blendMode = PIXI.BLEND_MODES.SRC_IN;
let originalContainer = new PIXI.Container();
let genTexture = app.renderer.generateTexture(originalContainer);
return new PIXI.Sprite(genTexture);
<script src=""></script>

enter image description here

Problem :

I’m using the code below to apply a mask in a container, but after I click the refresh button on page (chrome) the pixi stage becomes completely white until the refresh completes. Do you know how to fix that?

            let mask = new PIXI.Sprite(PIXI.Texture.WHITE);
            mask.x = maskX;
            mask.y = maskY;
            mask.width = maskWidth;
            mask.height = maskHeight;
            container.mask = mask;


Comment posted by domis86

By “click the refresh button” you mean “reload page in browser” (aka: F5)? What is the expected effect which you want to achieve?

Comment posted by MrNobody

yes F5, I don’t expect an effect at all, I just don’t want to appear the white color of the mask on front of canvas

Comment posted by MrNobody

so it should be var mask = new PIXI.Graphics(); mask.beginFill(0x555555) mask.drawRect(maskX, maskY, maskWidth, maskHeight) mask.endFill() container.mask = mask; ?

Comment posted by

That would work, but even simpler:

Comment posted by MrNobody

im sorry but it doesn’t seem to work for me. I’m getting Uncaught TypeError: t.render is not a function …/thirdparty/pixi.v5.1.3.min.js line:8 colno:143641