How to draw a simple graphics polygon with gradient color?

[kuoruan]

I want to draw a simple polygon with gradient background color in Pixi.graphics. like the createLinearGradient do. But I can't find the correct way.

Should I use a filter, and need to custom a filter? https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

I find some post:

But I can't really understand. Can any one give me a sample?

[jonforum]

you can maybe take a look how linear gardien are made with text.
https://goo.gl/j9AqD2

I suppose it the same way to use in graphics.

[kuoruan]

@jonforum But Pixi.graphics dose not has the API like text.

[kuoruan]

Found a solution but not so good.

https://stackoverflow.com/questions/48370902/pixi-js-draw-rectangle-with-gradient-fill/48521127#48521127

[botmaster]

You could probably make a clone of the graphics fragment source and implement gradient in there.

[Ming Iu]

You could also create the gradient as a separate object, and then you can mask it out with a polygon. Here's an example. In that example, I'm using a vector drawing for the gradient, but since gradients don't become blurry when resized, you could probably use a sprite for that as well. I'm not sure if masks have good performance, but if you just need a few of them, then it's probably fine.