Interface: ConvertedStrokeStyle

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

used internally and is a complete stroke style

Advanced

Properties

alignment

> 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

alpha

> 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

cap

> 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

color

> color: number

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

fill

> 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

join

> 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

matrix

> 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

miterLimit

> 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

> 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

texture

> 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

textureSpace

> 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

width

> 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