Interface: StrokeAttributes

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:230

A stroke attribute object that defines how lines and shape outlines are drawn. Controls properties like width, alignment, line caps, joins, and more.

Example

const graphics = new Graphics();

// Basic stroke with width
graphics.stroke({
    width: 4,
    color: 0xff0000 // Or use a Color object
});

// Stroke with rounded corners and ends
const text = new Text('Hello World', {
    fontSize: 32,
    fill: 0x000000, // Text color
    stroke: {
    width: 8,
        color: 0x00ff00, // Or use a Color object
        cap: 'round',    // Round end caps
        join: 'round',   // Round corner joins
        alignment: 0.5   // Center alignment
    }
});

// Stroke with mitered corners
graphics.stroke({
    width: 6,
    color: 0x0000ff, // Or use a Color object
    join: 'miter',
    miterLimit: 3,   // Limit how far miter extends
    alignment: 0     // Outside alignment
});

// Pixel-perfect line
graphics.stroke({
    width: 1,
    pixelLine: true, // Ensures crisp 1px lines
    color: 0x000000  // Or use a Color object
});

See

• Graphics#stroke For applying strokes to paths
• LineCap For line end cap options
• LineJoin For line join options

Standard

Extended by

• StrokeStyle

Properties

alignment?

> optional alignment?: number

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:256

The alignment of the stroke relative to the path.

• 1: Inside the shape
• 0.5: Centered on the path (default)
• 0: Outside the shape

Example

// Inside alignment
const stroke = { alignment: 1 };
// Centered alignment
const stroke = { alignment: 0.5 };
// Outside alignment
const stroke = { alignment: 0 };

Default

0.5

cap?

> optional cap?: LineCap

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:269

The style to use for the ends of open paths.

• 'butt': Ends at path end
• 'round': Rounds past path end
• 'square': Squares past path end

Example

const stroke = { cap: 'round' };

Default

'butt'

See

LineCap For line cap options

join?

> optional join?: LineJoin

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:282

The style to use where paths connect.

• 'miter': Sharp corner
• 'round': Rounded corner
• 'bevel': Beveled corner

Example

const stroke = { join: 'round' };

Default

'miter'

See

LineJoin For line join options

miterLimit?

> optional miterLimit?: number

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:295

Controls how far miter joins can extend. Only applies when join is 'miter'. Higher values allow sharper corners.

Example

const stroke = {
    join: 'miter',
    miterLimit: 3,
};

Default

10

pixelLine?

> optional pixelLine?: boolean

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:315

When true, ensures crisp 1px lines by aligning to pixel boundaries. > [!NOTE] Only available for Graphics fills.

Example

const graphics = new Graphics();

// Draw pixel-perfect line
graphics
    .moveTo(50, 50)
    .lineTo(150, 50)
    .stroke({
        width: 1,
        pixelLine: true,
        color: 0x000000
    });

Default

false

width?

> optional width?: number

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:239

The width of the stroke in pixels.

Example

const stroke = { width: 4 };

Default

1