Gradient Rectangle in Phaser 3

[JesusJoseph]

I need to create a sky color background. 

I am planning to do it using a gradient rectangle using below code but I am getting below error at LINE 2

HomeScene.js:68 Uncaught TypeError: Cannot read property 'createLinearGradient' of undefined

var texture = this.textures.createCanvas('gradient', 16, 256);
var grd = texture.context.createLinearGradient(0, 0, 0, 256);    // ERROR LINE

grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');

texture.context.fillStyle = grd;
texture.context.fillRect(0, 0, 16, 256);

//  Call this if running under WebGL, or you'll see nothing change
texture.refresh();

Can someone please tell me how to create a gradient images.

Thanks for your help.

[YuPi]

var texture = this.textures.createCanvas('gradient', 16, 256);
var context = texture.getContext();
var grd = context.createLinearGradient(0, 0, 0, 256);    // ERROR LINE

grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');

context.fillStyle = grd;
context.fillRect(0, 0, 16, 256);

//  Call this if running under WebGL, or you'll see nothing change
texture.refresh();

 

[JesusJoseph]

15 minutes ago, YuPi said:

var texture = this.textures.createCanvas('gradient', 16, 256);
var context = texture.getContext();
var grd = context.createLinearGradient(0, 0, 0, 256);    // ERROR LINE

grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');

context.fillStyle = grd;
context.fillRect(0, 0, 16, 256);

//  Call this if running under WebGL, or you'll see nothing change
texture.refresh();

 

Thanks for your reply

 

Now  I am getting another error from the second line (var context = texture.getContext();) as below

HomeScene.js:66 Uncaught TypeError: texture.getContext is not a function
    at HomeScene.create (HomeScene.js:66)
    at SceneManager.create (phaser.js:41315)
    at SceneManager.bootScene (phaser.js:41169)

I am using Phaser 3.5.1 

[YuPi]

Try upgrading your Phaser version. I've tried it on current beta and it works.

[JesusJoseph]

Thanks YuPi

After I changed to version 3.10.1 then there is no error

But still, I didn't see the gradient rectangle in my screen.

In create function I have only below codes. But my screen is all black. Any help will be appreciated. 

var texture = this.textures.createCanvas('gradient', 200, 256);
var context = texture.getContext();
var grd = context.createLinearGradient(0, 0, game.config.width, game.config.height);    // ERROR LINE

grd.addColorStop(0, '#FFFFFF');
grd.addColorStop(1, '#004CB3');

context.fillStyle = grd;
context.fillRect(0, 0, game.config.width, game.config.height);

//  Call this if running under WebGL, or you'll see nothing change
texture.refresh();

//Second one
//----------------------------------------------------------------------------
var c=this.textures.createCanvas('gradient1', 200, 256);
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(100,100,150,80);

 

[YuPi]

With this code you just create a texture. To display it, you have to add an object that uses it to your scene.

this.add.image(100, 100, 'gradient');

 

[JesusJoseph]

yes it working 

thanks for your help