Stretch Background Image to Cover Entire Area in Phaser 3

If you have a background image and want to stretch it so that entire canvas area is covered, here is a sample code written in Typescript.

export class LoaderScene extends Phaser.Scene {

    private background: Phaser.GameObjects.Image;
    constructor() {
        super({
            key: "LoaderScene"
        });
    }
    init() {
        // background
        this.background = this.add.image(0, 0, "bg")
        .setOrigin(.5, .5);
        // Based on your game size, it may "stretch" and distort.
        this.background.displayWidth = this.sys.canvas.width;
        this.background.displayHeight = this.sys.canvas.height;
        
    }
}

Please note that I am just stretching the image and not necessarily keeping the aspect ratio. If you need to keep aspect ratio and stretch the background image, you need to use your own calculated width and height.