Javascript 为什么我的相位梯度消失了？

我试图创建一个径向梯度，从一个点开始，然后从那个点开始生长，有点像烟雾弥漫房间。我从这个例子开始：

并且一直在慢慢调整它以满足我的需要。我现在的问题是，当我的孩子停止跑步时，整个东西就消失了。以下是我得到的：

在创建函数中：

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

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

    const grd = this.radGrad.context.createRadialGradient(200, 200, 0, 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);

在更新功能中：

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

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

    const grd = this.radGrad.context.createRadialGradient(200, 200, 0, 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);