Fill Rounded Rectangle

Demonstrates how to draw filled rounded rectangles using the Graphics object, featuring both uniform corner radii and custom radius values for individual corners.

Fill Rounded Rectangle, running
800 × 600
GitHub
class Example extends Phaser.Scene
{
    graphics;

    create ()
    {
        this.graphics = this.add.graphics();

        this.graphics.fillStyle(0xffff00, 1);

        //  32px radius on the corners
        this.graphics.fillRoundedRect(32, 32, 300, 200, 32);

        this.graphics.fillStyle(0xff00ff, 1);

        //  Using an object to define a different radius per corner
        this.graphics.fillRoundedRect(360, 240, 400, 300, { tl: 64, tr: 22, bl: 12, br: 0 });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Graphics40 examples