Initial rectangle positioning varies depending on width about phaser

[photonstorm]

x/y coordinates for all Game Objects is the center by default. This can be changed via the setOrigin() method.

[UnaiNeuronUp]

Changing width property is ignoring the origin of the rectangle.

class MainScene extends Phaser.Scene {
    timedEvent;
    progressBar;

    constructor() {
        super({ key: "MainScene" });
    }

    create() {
        this.rectWidth = 200;
        this.add.rectangle(200, 200, this.rectWidth, 60).setStrokeStyle(1, 0xffffff);
        

        // Use one of these lines to see different behaviors
        this.progressBar = this.add.rectangle(200, 200, 0, 60, 0xffffff);
        // this.progressBar = this.add.rectangle(200, 200, this.rectWidth, 60, 0xffffff);


        this.timedEvent = this.time.delayedCall(3000);
    }

    update() {
        this.progressBar.width = this.rectWidth * this.timedEvent.getProgress();
    }

}

const game = new Phaser.Game({
    type: Phaser.AUTO,
    width: 800,
    height: 800,
    backgroundColor: '#111111',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [ MainScene ]
})

[photonstorm]

If you want to change the intrinsic width (as above) then you can use the width property like this, and it will extend out from the origin to the right. If you want to change how it renders, factoring in the origin, use displayWidth instead.