Jump to content

Pixi Legacy v5.1 and Mask issue


Recommended Posts


I'm doing a web configurator based on Pixi and Vuejs.
I've used pixi v5 but for those not support Webgl
and for some automatization (Puppeteer screenshot for example)
I've prefer install pixi-legacy.

My issue is about masking. 
I've got a Graphics (a rectangle with backround) and I apply to it a Sprite like mask.
In Pixi v5 it works well but in pixi-legacy it doesn't.
I use simply 

this.instance.mask = mask

where instance is the ref of my 

new Graphics

If you have some suggestion I'm glad!

Thanks in advance and regards,



Link to comment
Share on other sites

Hi thanks for reply.
Then more information:

I've use Vue but I thinks It doesn't matter.

My flow is:

I create a news Graphic:

instance () { return new Graphics() }

then I've got an instance of the Graphic


and I set some properties (fill is the HEX background of the mask, width and height are the sizes of the images)

this.instance.beginFill(fill, 1)
this.instance.drawRect(0, 0, this.width, this.height)

when the Sprite is load I attach the Mask to the graphics

this.instance.mask = mask

Mask is the reference to the Sprite instance and the property isMask is correctly set to true.

In Pixi v5 the mask is correctly applied instead in Pixi-legacy it show me the filled rectangle and not the filled mask shape.

I hope you understand and thanks again,







Link to comment
Share on other sites

when the Sprite is load I attach the Mask to the graphics

Oh right, you cant use mask sprites on canvas2d.

Only graphics masks can work with pixi-legacy CanvasRenderer. Its not a BUG , its just no one made implementation of sprite mask for it. We have many things like this one, the front is very big.

Someone tried to solve this exact issue and even made PR 3 years ago , but it wasnt accepted i dont remember why.

You are welcome to try! 

I think its possible and I think i can do that in 30 minutes or so, but I have too many things to do anyway, and others in pixijs team are even more busy.

You have four options

1. implement it yourself, if you know canvas2d context good enough, I can tell where to look at

2. mask sprite with graphics and not the other way

3. tell me your actual problem and not supposed solution, maybe i can give you a workaround

4. Wait for me or someone else who can do that, in that case its completely random time with exponential distribution, no one can guarantee anything.

5. Donate to https://opencollective.com/pixijs and ask @Mat Groves to actually make this task a priority. We are going to implement bounty system in a month or two to make that option easier for people.

Link to comment
Share on other sites

I even found the notice: https://pixijs.download/dev/docs/PIXI.DisplayObject.html#mask , "At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask."

And original PR: https://github.com/pixijs/pixi.js/pull/2650 , it existed for 1 year and wasnt solved.

So, why do you need that exact mask? Can you do something else instead?

Link to comment
Share on other sites

Hi thanks again!

Unfortunately my deadline doesn't let me to find a solution :(
I use a Sprite because the shape of the mask is complex (we are talking about a bike frame).
I thinks It is not replicable with a Graphics.

Thanks for linking me where donate!

Thanks and regards,



Link to comment
Share on other sites

I cannot upload the image of a Mask because it return me and error 

/var/www/html/uploads/monthly_2019_07 could not be created.

but I think I've not workaround fir do that.

I use webgl and I block who doesn't support it.

thanks in advance and regards,


Link to comment
Share on other sites


Sprite mask over graphics is very strange case, are you sure it cant be turned around?

Or maybe blendModes? I solved the problem with them not so long ago. DST_IN is 5-th from the top, it looks like your case. UPD: of course it needs extra canvas/renderTexture to avoid erasing EVERYTHING ELSE.


Link to comment
Share on other sites

4 minutes ago, ivan.popelyshev said:

Give me more info on the mask, perhaps there's a workaround . Sometimes people think that they need particular solution, but actual solution is easier.

I attach you a wetransfer link with the shape of one mask.


Sorry but I've say I cannot upload any images :(
Thanks i advance and regards,


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...