How to add a gradient color

[greendot]

Hi, everyone. For Phaser 2, I found this example on how to add a gradient color: https://phaser.io/examples/v2/display/gradient

However, I can't find a way to replicate in Phaser 3. Any ideas?

[Kanthi]

Hi ,

You can use the following to create gradient in Phaser 3. 

     var canvasTexture = this.textures.createCanvas('buttonTexture', 300, 60);
     var src = canvasTexture.getSourceImage();
     var context = src.getContext('2d');
     var gradient = context.createLinearGradient(0,0,0,60);
     gradient.addColorStop(0,"#ffffff");
     gradient.addColorStop(1,"#000000");
     context.fillStyle = gradient;
     context.fillRect(0,0,300,60);

//Below is required only when running the game in WEBGL
     canvasTexture.refresh();
     
     this.add.image(10,100,"buttonTexture");

[greendot]

Thank you Kanthi!