Rectangle Stroked

Demonstrates how to draw outlined rectangles using the Graphics object and custom line styles.

800 × 600

class Example extends Phaser.Scene
{

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

        graphics.lineStyle(1, 0x00ff00, 1);
        graphics.strokeRect(100, 100, 256, 256);

        graphics.lineStyle(1, 0xff0000, 0.5);
        graphics.strokeRect(250, 200, 400, 256);
    }

}

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

const game = new Phaser.Game(config);

More in Primitives17 examples

Split Path FilledDemonstrates how to draw and fill multiple separate shapes within a single Graphics path by using moveTo to start new sub-paths.

Stroked ArcsDemonstrates how to draw outlined arcs using the Graphics object, including setting line styles and defining circular paths.

Stroked TriangleDemonstrates how to draw outlined triangles using different line styles, widths, and colors with the Graphics object.

Triangle Gradient StrokesDemonstrates how to use lineGradientStyle to draw triangle outlines with multi-colored gradient strokes.