How to use the phaser.Geom function in phaser

export function drawGraphics({ x, y, width, height}, ctx) {
	const graphics = new Phaser.GameObjects.Graphics(ctx);
	const rect = new Phaser.Geom.Rectangle(x, y, width, height);
	// const rect = new CustomGraphics(this.customScene, this.customOptions);
	graphics.fillRectShape(rect); // rect: {x, y, width, height}
	graphics.fillRect(x, y, width, height);
	graphics.strokeRectShape(rect);  // rect: {x, y, width, height}
	graphics.strokeRect(x, y, width, height);
	return graphics;
};

createProgressbar (x, y)
    {
        // size & position
        let width = 400;
        let height = 20;
        let xStart = x - width / 2;
        let yStart = y - height / 2;

        // border size
        let borderOffset = 2;

        let borderRect = new Phaser.Geom.Rectangle(
            xStart - borderOffset,
            yStart - borderOffset,
            width + borderOffset * 2,
            height + borderOffset * 2);

        let border = this.add.graphics({
            lineStyle: {
                width: 5,
                color: 0xaaaaaa
            }
        });
        border.strokeRectShape(borderRect);

        let progressbar = this.add.graphics();

        /**

  findPath(startPoint, endPoint, PointClass = Phaser.Geom.Point) {
    const path = this.navMesh.findPath(startPoint, endPoint);
    return path ? path.map(({ x, y }) => new PointClass(x, y)) : path;
  }

getTilePosition (row, col) {
    const { boardSize, tileSize, tileSpacing } = gameOptions

    const posX = tileSpacing * (col + 1) + tileSize * (col + 0.5)
    let posY = tileSpacing * (row + 1) + tileSize * (row + 0.5)

    let boardHeight = boardSize.rows * tileSize
    boardHeight += (boardSize.rows + 1) * tileSpacing
    const offsetY = (this.game.config.height - boardHeight) / 2
    posY += offsetY

    return new Phaser.Geom.Point(posX, posY)
  }

render() {
        if (!this.faceup) {
            this.cardImage.setTexture(this.back)
        }

        this.blueGlow.setAlpha(0)
        this.add(this.blueGlow)

        this.cardImage.setDisplaySize(CARD_WIDTH, CARD_HEIGHT)
        this.cardImage.setPosition(0, SMALL_CARD_HEIGHT / 2 - CARD_HEIGHT * 0.05)
        const imageFrame = new Phaser.Geom.Rectangle(0, 0, SMALL_CARD_WIDTH / this.cardImage.scaleX, SMALL_CARD_HEIGHT / this.cardImage.scaleY)
        this.cardImage.setCrop(imageFrame)
        this.add(this.cardImage)

        this.backgroundImage.setDisplaySize(CARD_WIDTH, CARD_HEIGHT)
        this.backgroundImage.setCrop(0, (CARD_HEIGHT * 0.95) / this.cardImage.scaleY, CARD_WIDTH / this.cardImage.scaleX, (CARD_HEIGHT * 0.1) / this.cardImage.scaleY)
        this.backgroundImage.setY(-CARD_HEIGHT / 4 + CARD_HEIGHT * 0.05)
        this.add(this.backgroundImage)

        if (this.isMaverick) {
            this.add(this.maverickHouse)
            this.add(this.maverick)
        }

        this.interactiveZone.setPosition(0, 0)
        this.interactiveZone.setSize(SMALL_CARD_WIDTH, SMALL_CARD_HEIGHT + CARD_HEIGHT * 0.05)
        this.add(this.interactiveZone)

preload: function () {
    this.load.image('sky', require('../assets/sky.png'));
    this.load.image('ground', require('../assets/platform.png'));
    this.load.image('star', require('../assets/star.png'));
    this.load.image('bomb', require('../assets/bomb.png'));
    this.load.spritesheet('dude', require('../assets/dude.png'), { frameWidth: 32, frameHeight: 48 });
    var rect = new Phaser.Geom.Rectangle(200, 285, 400, 30);
    var gfx = this.add.graphics();
    this.load.on('progress', function (progress) {
      gfx
        .clear()
        .fillStyle(0x666666)
        .fillRectShape(rect)
        .fillStyle(0xffffff)
        .fillRect(rect.x, rect.y, progress * rect.width, rect.height);
    });
  },

update(time: number, delta: number) {
    this.player!.update(time);

    const camera = this.cameras.main;

    for (let slime of this.slimes) {
      slime.update(time);
    }

    const player = new Phaser.Math.Vector2({
      x: this.tilemap!.worldToTileX(this.player!.sprite.body.x),
      y: this.tilemap!.worldToTileY(this.player!.sprite.body.y)
    });

    const bounds = new Phaser.Geom.Rectangle(
      this.tilemap!.worldToTileX(camera.worldView.x) - 1,
      this.tilemap!.worldToTileY(camera.worldView.y) - 1,
      this.tilemap!.worldToTileX(camera.worldView.width) + 2,
      this.tilemap!.worldToTileX(camera.worldView.height) + 2
    );

    this.fov!.update(player, bounds, delta);
  }
}