Stroke Rect

Demonstrates how to draw the outline of a rectangle using the Graphics object, including setting the line thickness, color, and alpha.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    graphics;

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

        const color = 0xffff00;
        const thickness = 2;
        const alpha = 1;

        this.graphics.lineStyle(thickness, color, alpha);

        this.graphics.strokeRect(32, 32, 256, 256);
    }
}

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

const game = new Phaser.Game(config);

More in Graphics40 examples

Stroke Rounded RectangleDemonstrates how to draw the outline of rounded rectangles with both uniform corner radii and individual radii for each corner using the Graphics object.

Stroke TriangleThis example shows how to use a Graphics object to draw the outline of a triangle by defining three coordinate points and a custom line style.

3D Wireframe OBJ ViewerDemonstrates how to parse 3D .obj files and render them as animated wireframe objects using Phaser Graphics and manual vertex rotation math.

3D Wireframe TeapotDemonstrates parsing a 3D .obj model and rendering it as a rotating wireframe using Graphics primitives with manual vertex rotation and back-face culling.