Search code examples
gradientpixi.jsstroke

How to apply gradient stroke in Pixi.js?


I have a text that needs to have two gradient strokes. Can't find information oh how to achieve this: enter image description here

P.S. I can't place different size text on top of each other, need to work only with one.


Solution

  • I've submitted a PR to PIXI which gives you some of your required functionality; you are now able to set gradients on the stroke, just as you can with fill.

    Check out https://github.com/pixijs/pixi.js/pull/4016 for to track its progress and for examples.

    However, your double stroke cannot be added in at library level, text in PIXI uses the canvas api (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) and that only supports a single stroke.