Interface: StrokeStyle

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

A stroke style object that combines fill properties with stroke attributes to define both the visual style and stroke behavior of lines, shape outlines, and text strokes.

Example

// --- Graphics Examples ---
const graphics = new Graphics();

// Basic solid color stroke
graphics.stroke({
    width: 4,
    color: 0xff0000,
    alpha: 0.8,
    join: 'round'
});

// Gradient stroke with attributes
const gradient = new FillGradient({
   end: { x: 1, y: 0 },
   stops: [
       { color: 0xff0000, offset: 0 }, // Red at start
       { color: 0x0000ff, offset: 1 }, // Blue at end
   ]
});

graphics.stroke({
    width: 8,
    fill: gradient,
    cap: 'round',
    join: 'round',
    alignment: 0.5
});

// --- Text Examples ---

// Basic text stroke
const text = new Text('Hello World', {
    fontSize: 48,
    stroke: {
        width: 4,
        color: 0x000000,
        alignment: 0  // Outside stroke
    }
});

// Gradient text stroke
const textGradient = new FillGradient({
  end: { x: 1, y: 0 },
  stops: [
      { color: 0xff0000, offset: 0 }, // Red at start
      { color: 0x0000ff, offset: 1 }, // Blue at end
  ]
});

const fancyText = new Text('Gradient Outline', {
    fontSize: 64,
    fill: 0xffffff,
    stroke: {
        width: 6,
        fill: textGradient,
        alignment: 0.5,
        join: 'round'
    }
});

See

• FillStyle For fill properties
• StrokeAttributes For stroke properties
• Graphics#stroke For applying strokes to paths
• Text For text stroke options

Standard

Extends

• FillStyle.StrokeAttributes

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

Inherited from

StrokeAttributes.alignment

alpha?

> optional alpha?: number

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

The alpha value to use for the fill. This value should be between 0 (fully transparent) and 1 (fully opaque).

Example

const fillStyle = { alpha: 0.5 }; // 50% opacity

Default

1

See

• ColorSource For more details on color sources
• FillStyle#color For color usage

Inherited from

FillStyle.alpha

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

Inherited from

StrokeAttributes.cap

color?

> optional color?: ColorSource

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

The color to use for the fill. This can be any valid color source, such as a hex value, a Color object, or a string.

Example

// Using a hex color
const fillStyle = { color: 0xff0000 }; // Red
// Using a Color object
const fillStyle = { color: new Color(1, 0, 0) }; // Red
// Using a string color
const fillStyle = { color: 'red' }; // Red
// Using object string
const fillStyle = { color: 'rgb(255, 0, 0)' }; // Red

See

ColorSource For more details on color sources

Inherited from

FillStyle.color

fill?

> optional fill?: FillGradient | FillPattern | null

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

The fill pattern or gradient to use. This can be either a FillPattern for repeating textures or a FillGradient for color transitions.

Example

// Using a gradient
const gradient = new FillGradient({
   end: { x: 1, y: 0 },
   stops: [
       { color: 0xff0000, offset: 0 }, // Red at start
       { color: 0x0000ff, offset: 1 }, // Blue at end
   ]
});

const fillStyle = {
    fill: gradient,
    alpha: 0.8
};

// Using a pattern
const pattern = new FillPattern(
    Texture.from('pattern.png'),
    'repeat' // or 'no-repeat', 'repeat-x', 'repeat-y'
);

const fillStyle = {
    fill: pattern
};

See

• FillPattern For creating pattern fills
• FillGradient For creating gradient fills

Inherited from

FillStyle.fill

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

Inherited from

StrokeAttributes.join

matrix?

> optional matrix?: Matrix | null

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

The transformation matrix to apply to the fill pattern or texture. Used to scale, rotate, translate, or skew the fill.

Example

// Scale and rotate a texture fill
const fillStyle = {
    texture: Texture.from('myImage.png'),
    matrix: new Matrix()
        .scale(0.5, 0.5)
        .rotate(Math.PI / 4)
};

Default

null

Inherited from

FillStyle.matrix

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

Inherited from

StrokeAttributes.miterLimit

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

Inherited from

StrokeAttributes.pixelLine

texture?

> optional texture?: Texture<TextureSource<any>> | null

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

The texture to use for the fill.

Example

const fillStyle = { texture: Texture.from('myImage.png') };

See

Texture For more details on textures

Inherited from

FillStyle.texture

textureSpace?

> optional textureSpace?: TextureSpace

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

Determines how texture coordinates are calculated across shapes.

• 'local': Texture coordinates are relative to each shape's bounds
• 'global': Texture coordinates are in world space

Example

// Local space - texture fits each shape independently
const fillStyle = {
    texture: Texture.from('myImage.png'),
    textureSpace: 'local'
};

// Global space - texture continues across shapes
const fillStyle = {
    texture: Texture.from('myImage.png'),
    textureSpace: 'global'
};

Default

'local'

See

TextureSpace For more details on texture spaces

Inherited from

FillStyle.textureSpace

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

Inherited from

StrokeAttributes.width