Adding a gradient to the background

[nonamedude]

Hey guys,

 

I'm new to pixi.js and canvas. I've been trying to add a gradient to the background but I can't seem to get the context (returning null). What am I doing wrong ?

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);	// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);var canvas = renderer.view;var ctx = canvas.getContext('2d');console.log (ctx); //null 

As a result this will not work

var lingrad = ctx.createLinearGradient(0,0,0,150);

[rich]

If you want to do context operations then you need to use the CanvasRenderer and not autoDetect, because that has given you a WebGL context, which you can't draw to in the way you're trying to.

[Sebi]

To add to rich's answer:

To create a gradient you can use any canvas that is not running on a webgl context.

 

You are not forced to use PIXI's CanvasRenderer just to use canvas methods.

 

 

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

 

Then create your gradient on that canvas and use it as a Texture for your background Sprite.

[nonamedude]

Yep I see what you mean. Got it to work . Thanks guys.