Why does my gradient disappear?

[CorayThan]

I'm trying to create a radial gradient that starts from a point and grows from there, a little like smoke filling a room. I started with this example:

https://phaser.io/examples/v2/bitmapdata/radial-gradient

And have been slowly tweaking it to meet my needs. My current issue is that when my tween stops running the entire thing disappears. It's probably a really obvious issue, but I'm a newb and can't find it, so was hoping for help! Here's what I've got (it's in Typescript):

in create:

 

        this.radGrad = this.game.make.bitmapData(800, 600);
        this.radGrad.addToWorld();
        this.radCircle = new Phaser.Circle(200, 200, 0);
        this.outerCircle = new Phaser.Circle(200, 200, 300);

        this.smokeTween = this.game.add.tween(this.radCircle).to( { radius: 300 }, 20000, Phaser.Easing.Sinusoidal.Out, true);

 

In update:

 

            const grd = this.radGrad.context.createRadialGradient(this.radCircle.x, this.radCircle.y, this.radCircle.radius, this.outerCircle.x, this.outerCircle.y, this.outerCircle.radius);
            grd.addColorStop(0, "rgba(0,0,0,0.3)");
            grd.addColorStop(1, "transparent");

            this.radGrad.cls();
            this.radGrad.circle(this.outerCircle.x, this.outerCircle.y, this.outerCircle.radius, grd);

 

[3man7]

Well I'm new to Phaser as well but here's my take:

The problem here is the value given to the radius in tween.
Should've been half of the size given in 'outerCircle', which is 150. (this.outerCircle = new Phaser.Circle(200, 200, 300);)

But for some reason it doesn't accept the perfect half, but by a point off. (149.9) (not sure why, hopefully someone could help me on this one)

This is a dirty hack and I would definitely look into other ways of dealing with this kind of effect.

//define variable
var circleRadius = 300;

//create
this.outerCircle = new Phaser.Circle(200, 200, circleRadius);

//update
this.smokeTween = this.game.add.tween(this.radCircle).to( { radius: circleRadius / 2 - .1 }, 20000, Phaser.Easing.Sinusoidal.Out, true);

 

[CorayThan]

You're right that I was using the same number for diameter and radius. Later I tried removing the inner circle entirely, though, and just did a gradient from a center point, and had the same issue.

Now I'm on a different computer and not having the same issue at all though ... maybe it is a browser-specific issue?