pixi.js
    Preparing search index...

    Interface StrokeStyle

    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.

    // --- 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'
        }
    });
    interface StrokeStyle {
        alignment?: number;
        alpha?: number;
        cap?: LineCap;
        color?: ColorSource;
        fill?: FillGradient | FillPattern;
        join?: LineJoin;
        matrix?: Matrix;
        miterLimit?: number;
        pixelLine?: boolean;
        texture?: Texture<TextureSource<any>>;
        textureSpace?: TextureSpace;
        width?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    alignment? alpha? cap? color? fill? join? matrix? miterLimit? pixelLine? texture? textureSpace? width?

    Properties

    alignment?: number

    The alignment of the stroke relative to the path.

    • 1: Inside the shape
    • 0.5: Centered on the path (default)
    • 0: Outside the shape
    // Inside alignment
    const stroke = { alignment: 1 };
    // Centered alignment
    const stroke = { alignment: 0.5 };
    // Outside alignment
    const stroke = { alignment: 0 };

    0.5
    alpha?: number

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

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

    1
    cap?: LineCap

    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
    const stroke = { cap: 'round' };

    'butt'

    LineCap For line cap options

    color?: ColorSource

    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.

    // 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

    ColorSource For more details on color sources

    fill?: FillGradient | FillPattern

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

    // 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
    };
    join?: LineJoin

    The style to use where paths connect.

    • 'miter': Sharp corner
    • 'round': Rounded corner
    • 'bevel': Beveled corner
    const stroke = { join: 'round' };

    'miter'

    LineJoin For line join options

    matrix?: Matrix

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

    // 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)
    };

    null
    miterLimit?: number

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

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

    10
    pixelLine?: boolean

    When true, ensures crisp 1px lines by aligning to pixel boundaries.

    Note

    Only available for Graphics fills.

    const graphics = new Graphics();

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

    false
    texture?: Texture<TextureSource<any>>

    The texture to use for the fill.

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

    Texture For more details on textures

    textureSpace?: TextureSpace

    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
    // 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'
    };

    'local'

    TextureSpace For more details on texture spaces

    width?: number

    The width of the stroke in pixels.

    const stroke = { width: 4 };

    1

    Settings

    Member Visibility

    On This Page

    Properties