Jump to content

Adding a gradient to the background


Recommended Posts

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);
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...