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() {
            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.



One response to “Stretch Background Image to Cover Entire Area in Phaser 3”

  1. Altamish Mahomed Avatar
    Altamish Mahomed

    Thank you so much 🙂
    Been struggling to find a method that simply works.

Leave a Reply

Your email address will not be published. Required fields are marked *