Interface: FillStyle

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

Defines the style properties used for filling shapes in graphics and text operations. This interface provides options for colors, textures, patterns, and gradients.

Example

// Basic color fill
const fillStyle = {
    color: 0xff0000,  // Red
    alpha: 0.5        // 50% opacity
};

// Textured fill ( Graphics only )
const fillStyle = {
    texture: Texture.from('myImage.png'),
    matrix: new Matrix().scale(0.5, 0.5),
};

// Gradient fill
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: 1
};

See

• FillPattern For creating pattern fills
• FillGradient For creating gradient fills
• TextureSpace For texture coordinate calculation modes

Standard

Extended by

• StrokeStyle

Properties

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

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

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

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

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

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