txusinho Posted February 22, 2016 Share Posted February 22, 2016 Hi there, I'm using pixi 3.0.3, and I'm creating a mask using a line https://jsfiddle.net/4b2v1amy/ Copying that code in the examples page http://pixijs.github.io/examples/index.html?s=demos&f=masking.js&title=Masking&v=v3.0.3 runs great in every browser supporting webGL. The expected result is shown in the followingimage But if I force the renderer to canvas (or disabling webGL in the browser), the result is the one seen in the attached image Line mask pixi 3.0.3 canvas. The mask isn't shown. Can anyone point me out if this is a bug of pixi? Thank you PS: I'd prefer not moving the mask to a polygon, since the mask evolves with the time and will make the geometry too complex. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 22, 2016 Share Posted February 22, 2016 I know how masks are working in canvas2d. Its not possible to make that with lines. Quote Link to comment Share on other sites More sharing options...
txusinho Posted February 22, 2016 Author Share Posted February 22, 2016 Thank you for the reponse. Why do you say so? So the only possible path will be to create polygons? It's weird, because in the documentation there is no reference to this restriction, which I think it's quite annoying. If anyone knows another workaround, I'd be more than happy to implement it Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 22, 2016 Share Posted February 22, 2016 HTML5 canvas context2d works that way: only "Fills" are counted in the mask Quote Link to comment Share on other sites More sharing options...
txusinho Posted February 23, 2016 Author Share Posted February 23, 2016 Thank you @ivan.popelyshev. I came up with a possible solution, as described here. I leave it for future references, and just in case someone has the same problem: http://stackoverflow.com/questions/21483829/how-to-draw-a-line-in-canvas-with-a-background-image Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 23, 2016 Share Posted February 23, 2016 That's basically what pixi does in webgl case. You can just copy the code Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.