Having radial gradient below canvas

[Alexander Farber]

Good evening,

with pixi.js 5.2.1 (and I am using pixi-legacy too) what is please the approach to have a radial background below the canvas or maybe drawn on it?

I have searched for suggestions, but they are few years old.

I have tried CSS-styling the canvas element with:

#myCanvas {
        background: radial-gradient(#e66465, #9198e5);
        border: 4px dotted red;
}

And commented the backgroundColor in the Javascript code (in the hope it would become transparent):

var app = new PIXI.Application({
       width: 1000,
       height: 500,
       view: document.getElementById('myCanvas'),
       // backgroundColor: 0xFFFFFF,
       antialias: true
});

but only the border was showing some of the gradient - please see the screenshot attached.

Thank you
Alex

Edited April 22, 2020 by Alexander Farber

[ivan.popelyshev]

1. you forgot "transparent: true"

2. absolutely no guarantees about radial gradients. I have a shader for it but i wont share it because it wil take time to explain things. Yeh, I have same gradient as in flash and in canvas2d, just no time to form a plugin out of it

[Alexander Farber]

Thank you, Ivan - transparent: true has helped in my case:

[Alexander Farber]

A follow-up for my question - if all you need is a radial background for your pixi.js canvas, then it is doable via CSS and here you will find my code for jQuery UI color picker for changing the color.