How to draw gradient color

[fengFanYong]

HI:

i want to draw gradient color,but found draw gradient color of text,can not draw gradient color of other shape.How to draw gradient color of rectangle.

[PainKKKiller]

I am doing it by canvas, may be there is a better solution

    var canvas = document.createElement('canvas');
    canvas.width  = 200;
    canvas.height = 60;
    var ctx = canvas.getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 50);
    gradient.addColorStop(0, "#D3872A");
    gradient.addColorStop(1, "#CFB732");
    ctx.fillStyle = gradient;
    var sprite = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));
    sprite.x = 341;
    sprite.y = 5;
    this.addChild(sprite);

 

[Zamiel]

This blows my mind. Is there really no actual native way with Pixi.js to draw a rectangle with a gradient?

[ivan.popelyshev]

If you dont need to animate it, 2d context is your best friend. Gradients aren't that easy to replicate exactly the same way, if you do a PR - we'll  discuss and merge it.

[YMShen]

Since over 90% browser support WebGL, can we just extend PIXI.mesh.Plane and use vertex color to implement simple gradient?

[ivan.popelyshev]

Now it is: https://github.com/gameofbombs/pixi-heaven , https://gameofbombs.github.io/examples-heaven/#/mesh/rope-colored.js , you can enable colors in mesh and setRGB it: https://github.com/gameofbombs/pixi-heaven/blob/master/src/mesh/00_Mesh.ts#L360

[mwissink]

On 2/8/2017 at 4:05 AM, PainKKKiller said:

I am doing it by canvas, may be there is a better solution

    var canvas = document.createElement('canvas');
    canvas.width  = 200;
    canvas.height = 60;
    var ctx = canvas.getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 50);
    gradient.addColorStop(0, "#D3872A");
    gradient.addColorStop(1, "#CFB732");
    ctx.fillStyle = gradient;
    var sprite = new PIXI.Sprite(PIXI.Texture.fromCanvas(canvas));
    sprite.x = 341;
    sprite.y = 5;
    this.addChild(sprite);

 

Note to future people looking at this thread, you do have to make a call to ctx.fillRect(). Without the call, nothing will be rendered in the sprite. 

ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient