Class: Graphics

ViewContainer.filters

this is the AABB rectangle bounds of the view in local untransformed space.

Inherited from

ViewContainer.bounds

context

Get Signature

> get context(): GraphicsContext

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:127

The underlying graphics context used for drawing operations. Controls how shapes and paths are rendered.

Example

// Create a shared context
const sharedContext = new GraphicsContext();

// Create graphics objects sharing the same context
const graphics1 = new Graphics();
const graphics2 = new Graphics();

// Assign shared context
graphics1.context = sharedContext;
graphics2.context = sharedContext;

// Both graphics will show the same shapes
sharedContext
    .rect(0, 0, 100, 100)
    .fill({ color: 0xff0000 });

See

GraphicsContext For drawing operations
GraphicsOptions For context configuration

Returns

GraphicsContext

Set Signature

> set context(context): void

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:102

Parameters

context

GraphicsContext

Returns

void

fillStyle

Get Signature

> get fillStyle(): ConvertedFillStyle

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1543

Gets or sets the current fill style for the graphics context. The fill style determines how shapes are filled when using the fill() method.

Example

const graphics = new Graphics();

// Basic color fill
graphics.fillStyle = {
    color: 0xff0000,  // Red
    alpha: 1
};

// Using gradients
const gradient = new FillGradient({
    end: { x: 0, y: 1 }, // Vertical gradient
    stops: [
        { offset: 0, color: 0xff0000, alpha: 1 }, // Start color
        { offset: 1, color: 0x0000ff, alpha: 1 }  // End color
    ]
});

graphics.fillStyle = {
    fill: gradient,
    alpha: 0.8
};

// Using patterns
graphics.fillStyle = {
    texture: myTexture,
    alpha: 1,
    matrix: new Matrix()
        .scale(0.5, 0.5)
        .rotate(Math.PI / 4)
};

See

FillStyle For all available fill style options
FillGradient For creating gradient fills
Graphics#fill For applying the fill to paths

Returns

ConvertedFillStyle

Set Signature

> set fillStyle(value): void

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1544

Parameters

value

FillInput

Returns

void

filters

Get Signature

> get filters(): readonly Filter[]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:277

Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children.

> [!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

Example

new Container({
    filters: [new BlurFilter(2), new ColorMatrixFilter()],
});

See

Filter For filter base class

Returns

readonly Filter[]

Set Signature

> set filters(value): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:276

Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children.

> [!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.

Example

// Add a single filter
sprite.filters = new BlurFilter(2);

// Apply multiple filters
container.filters = [
    new BlurFilter(2),
    new ColorMatrixFilter(),
];

// Remove filters
sprite.filters = null;

See

Filter For filter base class

Parameters

value

Filter | Filter[] | null | undefined

Returns

void

Inherited from

height

Get Signature

> get height(): number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1117

The height of the Container, > [!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio. > [!NOTE] If you want to set both width and height at the same time, use Container#setSize as it is more optimized by not recalculating the local bounds twice.

Example

// Basic height setting
container.height = 200;
// Optimized height setting
container.setSize(100, 200);

Returns

number

Set Signature

> set height(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1118

Parameters

value

number

Returns

void

Inherited from

ViewContainer.height

isRenderable

Get Signature

> get isRenderable(): boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1329

Whether or not the object should be rendered.

Advanced

Returns

boolean

Inherited from

ViewContainer.isRenderable

isRenderGroup

Get Signature

> get isRenderGroup(): boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:894

Returns true if this container is a render group. This means that it will be rendered as a separate pass, with its own set of instructions

Advanced

Returns

boolean

Set Signature

> set isRenderGroup(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:888

Parameters

value

boolean

Returns

void

Inherited from

ViewContainer.isRenderGroup

origin

Get Signature

> get origin(): ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1087

Experimental

The origin point around which the container rotates and scales without affecting its position. Unlike pivot, changing the origin will not move the container's position.

Example

// Rotate around center point
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

// Reset origin
container.origin.set(0, 0);

Returns

Set Signature

> set origin(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1088

Parameters

value

number | PointData

Returns

void

Inherited from

ViewContainer.origin

pivot

Get Signature

> get pivot(): ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1023

The center of rotation, scaling, and skewing for this display object in its local space. The position is the projection of pivot in the parent's local space.

By default, the pivot is the origin (0, 0).

Example

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // Rotates around center

Since

4.0.0

Returns

Set Signature

> set pivot(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1024

Parameters

value

number | PointData

Returns

void

Inherited from

ViewContainer.pivot

position

Get Signature

> get position(): ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:959

The coordinate of the object relative to the local coordinates of the parent.

Example

// Basic position setting
container.position.set(100, 200);
container.position.set(100); // Sets both x and y to 100
// Using point data
container.position = { x: 50, y: 75 };

Since

4.0.0

Returns

Set Signature

> set position(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:960

Parameters

value

ViewContainer.position

Returns

void

Inherited from

renderable

Get Signature

> get renderable(): boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1323

Controls whether this object can be rendered. If false the object will not be drawn, but the transform will still be updated. This is different from visible, which skips transform updates.

Example

// Basic render control
sprite.renderable = false; // Skip rendering
sprite.renderable = true;  // Enable rendering

Default

true

See

Container#visible For skipping transform updates
Container#alpha For transparency

Returns

boolean

Set Signature

> set renderable(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1324

Parameters

value

boolean

Returns

void

Inherited from

ViewContainer.renderable

rotation

Get Signature

> get rotation(): number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:984

The rotation of the object in radians.

> [!NOTE] 'rotation' and 'angle' have the same effect on a display object; > rotation is in radians, angle is in degrees.

Example

// Basic rotation
container.rotation = Math.PI / 4; // 45 degrees

// Convert from degrees
const degrees = 45;
container.rotation = degrees * Math.PI / 180;

// Rotate around center
container.pivot.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

// Rotate around center with origin
container.origin.set(container.width / 2, container.height / 2);
container.rotation = Math.PI; // 180 degrees

Returns

number

Set Signature

> set rotation(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:985

Parameters

value

number

Returns

void

Inherited from

ViewContainer.rotation

roundPixels

Get Signature

> get roundPixels(): boolean

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:86

Whether or not to round the x/y position of the sprite.

Example

// Enable pixel rounding for crisp rendering
view.roundPixels = true;

Default

false

Returns

boolean

Set Signature

> set roundPixels(value): void

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:87

Whether or not to round the x/y position of the object.

Parameters

value

boolean

Returns

void

Inherited from

ViewContainer.roundPixels

scale

Get Signature

> get scale(): ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1071

The scale factors of this object along the local coordinate axes.

The default scale is (1, 1).

Example

// Basic scaling
container.scale.set(2, 2); // Scales to double size
container.scale.set(2); // Scales uniformly to double size
container.scale = 2; // Scales uniformly to double size
// Scale to a specific width and height
container.setSize(200, 100); // Sets width to 200 and height to 100

Since

4.0.0

Returns

Set Signature

> set scale(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1072

Parameters

value

string | number | PointData

Returns

void

Inherited from

ViewContainer.scale

skew

Get Signature

> get skew(): ObservablePoint

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1054

The skew factor for the object in radians. Skewing is a transformation that distorts the object by rotating it differently at each point, creating a non-uniform shape.

Example

// Basic skewing
container.skew.set(0.5, 0); // Skew horizontally
container.skew.set(0, 0.5); // Skew vertically

// Skew with point data
container.skew = { x: 0.3, y: 0.3 }; // Diagonal skew

// Reset skew
container.skew.set(0, 0);

// Animate skew
app.ticker.add(() => {
    // Create wave effect
    container.skew.x = Math.sin(Date.now() / 1000) * 0.3;
});

// Combine with rotation
container.rotation = Math.PI / 4; // 45 degrees
container.skew.set(0.2, 0.2); // Skew the rotated object

Since

4.0.0

Default

{x: 0, y: 0}

Returns

Set Signature

> set skew(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1055

Parameters

value

Returns

void

Inherited from

ViewContainer.skew

strokeStyle

Get Signature

> get strokeStyle(): ConvertedStrokeStyle

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1588

Gets or sets the current stroke style for the graphics context. The stroke style determines how paths are outlined when using the stroke() method.

Example

const graphics = new Graphics();

// Basic stroke style
graphics.strokeStyle = {
    width: 2,
    color: 0xff0000,
    alpha: 1
};

// Using with gradients
const gradient = new FillGradient({
  end: { x: 0, y: 1 },
  stops: [
      { offset: 0, color: 0xff0000, alpha: 1 },
      { offset: 1, color: 0x0000ff, alpha: 1 }
  ]
});

graphics.strokeStyle = {
    width: 4,
    fill: gradient,
    alignment: 0.5,
    join: 'round',
    cap: 'round'
};

// Complex stroke settings
graphics.strokeStyle = {
    width: 6,
    color: 0x00ff00,
    alpha: 0.5,
    join: 'miter',
    miterLimit: 10,
};

See

StrokeStyle For all available stroke style options
Graphics#stroke For applying the stroke to paths

Returns

ConvertedStrokeStyle

Set Signature

> set strokeStyle(value): void

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1589

Parameters

value

StrokeStyle

Returns

void

tint

Get Signature

> get tint(): number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1268

The tint applied to the sprite.

This can be any valid ColorSource.

Example

// Basic color tinting
container.tint = 0xff0000; // Red tint
container.tint = 'red';    // Same as above
container.tint = '#00ff00'; // Green
container.tint = 'rgb(0,0,255)'; // Blue

// Remove tint
container.tint = 0xffffff; // White = no tint
container.tint = null;     // Also removes tint

Default

0xFFFFFF

See

Container#alpha For transparency
Container#visible For visibility control

Returns

number

Set Signature

> set tint(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1247

Parameters

value

ViewContainer.visible

Returns

void

Inherited from

ViewContainer.tint

visible

Get Signature

> get visible(): boolean

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1303

The visibility of the object. If false the object will not be drawn, and the transform will not be updated.

Example

// Basic visibility toggle
sprite.visible = false; // Hide sprite
sprite.visible = true;  // Show sprite

Default

true

See

Container#renderable For render-only control
Container#alpha For transparency

Returns

boolean

Set Signature

> set visible(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1304

Parameters

value

boolean

Returns

void

Inherited from

width

Get Signature

> get width(): number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1102

The width of the Container, setting this will actually modify the scale to achieve the value set. > [!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio. > [!NOTE] If you want to set both width and height at the same time, use Container#setSize as it is more optimized by not recalculating the local bounds twice.

Example

// Basic width setting
container.width = 100;
// Optimized width setting
container.setSize(100, 100);

Returns

number

Set Signature

> set width(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1103

Parameters

value

number

Returns

void

Inherited from

ViewContainer.width

worldTransform

Get Signature

> get worldTransform(): Matrix

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:922

Current transform of the object based on world (parent) factors.

This matrix represents the absolute transformation in the scene graph.

Example

// Get world position
const worldPos = container.worldTransform;
console.log(`World position: (${worldPos.tx}, ${worldPos.ty})`);

See

Container#localTransform For local space transform

Returns

ViewContainer.worldTransform

Inherited from

x

Get Signature

> get x(): number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:933

The position of the container on the x axis relative to the local coordinates of the parent.

An alias to position.x

Example

// Basic position
container.x = 100;

Returns

number

Set Signature

> set x(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:934

Parameters

value

number

Returns

void

Inherited from

ViewContainer.x

y

Get Signature

> get y(): number

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:945

The position of the container on the y axis relative to the local coordinates of the parent.

An alias to position.y

Example

// Basic position
container.y = 200;

Returns

number

Set Signature

> set y(value): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:946

Parameters

value

number

Returns

void

Inherited from

ViewContainer.y

Methods

_getGlobalBoundsRecursive()

> _getGlobalBoundsRecursive(factorRenderLayers, bounds, currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:32

Internal

Recursively calculates the global bounds for the container and its children. This method is used internally by getFastGlobalBounds to traverse the scene graph.

Parameters

factorRenderLayers

boolean

A flag indicating whether to consider render layers in the calculation.

bounds

The bounds object to update with the calculated values.

currentLayer

ViewContainer._getGlobalBoundsRecursive

The current render layer being processed.

Returns

void

Inherited from

_onTouch()

> _onTouch(now): void

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:202

Internal

Parameters

now

number

The current time in milliseconds.

Returns

void

Inherited from

ViewContainer._onTouch

addChild()

> addChild<U>(...children): U[0]

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:864

Adds one or more children to the container. The children will be rendered as part of this container's display list.

Type Parameters

U

U extends ContainerChild[]

Parameters

children

...U

The Container(s) to add to the container

Returns

U[0]

The first child that was added

Example

// Add a single child
container.addChild(sprite);

// Add multiple children
container.addChild(background, player, foreground);

// Add with type checking
const sprite = container.addChild<Sprite>(new Sprite(texture));
sprite.tint = 'red';

See

Container#removeChild For removing children
Container#addChildAt For adding at specific index

Inherited from

ViewContainer.addChild

addChildAt()

> addChildAt<U>(child, index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:161

Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown. If the child is already in this container, it will be moved to the specified index.

When moving a child within the same container, childAdded and added events are not emitted because the parent-child relationship hasn't changed. Events only fire when a child is added from a different parent (or from no parent).

Type Parameters

U

U extends ContainerChild

Parameters

child

U

The child to add

index

number

The index where the child will be placed

Returns

U

The child that was added

Example

// Add at specific index
container.addChildAt(sprite, 0); // Add to front

// Move existing child (no events emitted)
const index = container.children.length - 1;
container.addChildAt(existingChild, index); // Move to back

// With error handling
try {
    container.addChildAt(sprite, 1000);
} catch (e) {
    console.warn('Index out of bounds');
}

Throws

If index is out of bounds

See

Container#addChild For adding to the end
Container#setChildIndex For moving existing children

Inherited from

ViewContainer.addChildAt

addEventListener()

Call Signature

> addEventListener<K>(type, listener, options?): void

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1072

Unlike on or addListener which are methods from EventEmitter, addEventListener seeks to be compatible with the DOM's addEventListener with support for options.

Type Parameters

K

K extends keyof FederatedEventMap | keyof GlobalFederatedEventMap

Parameters

type

K

The type of event to listen to.

listener

(e) => any

The listener callback or object.

options?

AddListenerOptions

Listener options, used for capture phase.

Returns

void

Example

// Tell the user whether they did a single, double, triple, or nth click.
button.addEventListener('click', {
    handleEvent(e): {
        let prefix;

        switch (e.detail) {
            case 1: prefix = 'single'; break;
            case 2: prefix = 'double'; break;
            case 3: prefix = 'triple'; break;
            default: prefix = e.detail + 'th'; break;
        }

        console.log('That was a ' + prefix + 'click');
    }
});

// But skip the first click!
button.parent.addEventListener('click', function blockClickOnce(e) {
    e.stopImmediatePropagation();
    button.parent.removeEventListener('click', blockClickOnce, true);
}, {
    capture: true,
});

Inherited from

ViewContainer.addEventListener

Call Signature

> addEventListener(type, listener, options?): void

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1073

Parameters

type

string

listener

EventListenerOrEventListenerObject

options?

AddListenerOptions

Returns

void

Inherited from

ViewContainer.addEventListener

addListener()

> addListener<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:45

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

ViewContainer.addListener

arc()

> arc(x, y, radius, startAngle, endAngle, counterclockwise?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:515

Adds an arc to the current path, which is centered at (x, y) with the specified radius, starting and ending angles, and direction.

Parameters

x

number

The x-coordinate of the arc's center

y

number

The y-coordinate of the arc's center

radius

number

The arc's radius (must be positive)

startAngle

number

The starting point of the arc, in radians

endAngle

number

The end point of the arc, in radians

counterclockwise?

boolean

Optional. If true, draws the arc counterclockwise. If false (default), draws clockwise.

Returns

this

The Graphics instance for method chaining

Example

// Draw a simple arc (quarter circle)
const graphics = new Graphics();
graphics
    .arc(100, 100, 50, 0, Math.PI/2)
    .stroke({ width: 2, color: 0xff0000 });

// Draw a full circle using an arc
graphics
    .arc(200, 200, 30, 0, Math.PI * 2)
    .stroke({ color: 0x00ff00 });

// Draw a counterclockwise arc
graphics
    .arc(150, 150, 40, Math.PI, 0, true)
    .stroke({ width: 2, color: 0x0000ff });

See

Graphics#circle For drawing complete circles
Graphics#arcTo For drawing arcs between points
Graphics#arcToSvg For SVG-style arc drawing

arcTo()

> arcTo(x1, y1, x2, y2, radius): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:548

Adds an arc to the current path that connects two points using a radius. The arc is drawn between the current point and the specified end point, using the given control point to determine the curve of the arc.

Parameters

x1

number

The x-coordinate of the control point

y1

number

The y-coordinate of the control point

x2

number

The x-coordinate of the end point

y2

number

The y-coordinate of the end point

radius

number

The radius of the arc in pixels (must be positive)

Returns

this

The Graphics instance for method chaining

Example

// Draw a simple curved corner
const graphics = new Graphics();
graphics
    .moveTo(50, 50)
    .arcTo(100, 50, 100, 100, 20) // Rounded corner with 20px radius
    .stroke({ width: 2, color: 0xff0000 });

// Create a rounded rectangle using arcTo
graphics
    .moveTo(150, 150)
    .arcTo(250, 150, 250, 250, 30) // Top right corner
    .arcTo(250, 250, 150, 250, 30) // Bottom right corner
    .arcTo(150, 250, 150, 150, 30) // Bottom left corner
    .arcTo(150, 150, 250, 150, 30) // Top left corner
    .fill({ color: 0x00ff00 });

See

Graphics#arc For drawing arcs using center point and angles
Graphics#arcToSvg For SVG-style arc drawing
Graphics#roundRect For drawing rectangles with rounded corners

arcToSvg()

> arcToSvg(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:595

Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec. This is particularly useful when converting SVG paths to Graphics or creating complex curved shapes.

Parameters

rx

number

The x-radius of the ellipse (must be non-negative)

ry

number

The y-radius of the ellipse (must be non-negative)

xAxisRotation

number

The rotation of the ellipse's x-axis relative to the x-axis, in degrees

largeArcFlag

number

Either 0 or 1, determines if the larger of the two possible arcs is chosen (1) or not (0)

sweepFlag

number

Either 0 or 1, determines if the arc should be swept in a positive angle direction (1) or negative (0)

x

number

The x-coordinate of the arc's end point

y

number

The y-coordinate of the arc's end point

Returns

this

The Graphics instance for method chaining

Example

// Draw a simple elliptical arc
const graphics = new Graphics();
graphics
    .moveTo(100, 100)
    .arcToSvg(50, 30, 0, 0, 1, 200, 100)
    .stroke({ width: 2, color: 0xff0000 });

// Create a complex path with rotated elliptical arc
graphics
    .moveTo(150, 150)
    .arcToSvg(
        60,    // rx
        30,    // ry
        45,    // x-axis rotation (45 degrees)
        1,     // large arc flag
        0,     // sweep flag
        250,   // end x
        200    // end y
    )
    .stroke({ width: 4, color: 0x00ff00 });

// Chain multiple arcs for complex shapes
graphics
    .moveTo(300, 100)
    .arcToSvg(40, 20, 0, 0, 1, 350, 150)
    .arcToSvg(40, 20, 0, 0, 1, 300, 200)
    .fill({ color: 0x0000ff, alpha: 0.5 });

See

Graphics#arc For simple circular arcs
Graphics#arcTo For connecting points with circular arcs
Graphics#svg For parsing complete SVG paths

beginFill()

> beginFill(color, alpha?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1640

Parameters

color

alpha?

number

Returns

this

Deprecated

since 8.0.0 Use Graphics#fill instead

beginPath()

> beginPath(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:463

Resets the current path. Any previous path and its commands are discarded and a new path is started. This is typically called before beginning a new shape or series of drawing commands.

Returns

this

The Graphics instance for chaining

Example

const graphics = new Graphics();
graphics
    .circle(150, 150, 50)
    .fill({ color: 0x00ff00 })
    .beginPath() // Starts a new path
    .circle(250, 150, 50)
    .fill({ color: 0x0000ff });

See

Graphics#moveTo For starting a new subpath
Graphics#closePath For closing the current path

bezierCurveTo()

> bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, smoothness?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:635

Adds a cubic Bézier curve to the path, from the current point to the specified end point. The curve is influenced by two control points that define its shape and curvature.

Parameters

cp1x

number

The x-coordinate of the first control point

cp1y

number

The y-coordinate of the first control point

cp2x

number

The x-coordinate of the second control point

cp2y

number

The y-coordinate of the second control point

x

number

The x-coordinate of the end point

y

number

The y-coordinate of the end point

smoothness?

number

Optional parameter to adjust the curve's smoothness (0-1)

Returns

this

The Graphics instance for method chaining

Example

// Draw a simple curved line
const graphics = new Graphics();
graphics
    .moveTo(50, 50)
    .bezierCurveTo(
        100, 25,   // First control point
        150, 75,   // Second control point
        200, 50    // End point
    )
    .stroke({ width: 2, color: 0xff0000 });

// Adjust curve smoothness
graphics
    .moveTo(50, 200)
    .bezierCurveTo(
        100, 150,
        200, 250,
        250, 200,
        0.5         // Smoothness factor
    )
    .stroke({ width: 4, color: 0x0000ff });

See

Graphics#quadraticCurveTo For simpler curves with one control point
Graphics#arc For circular arcs
Graphics#arcTo For connecting points with circular arcs

chamferRect()

> chamferRect(x, y, width, height, chamfer, transform?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1137

Draws a rectangle with chamfered (angled) corners. Each corner is cut off at a 45-degree angle based on the chamfer size.

Parameters

x

number

The x-coordinate of the top-left corner of the rectangle

y

number

The y-coordinate of the top-left corner of the rectangle

width

number

The width of the rectangle

height

number

The height of the rectangle

chamfer

number

The size of the corner chamfers (must be non-zero)

transform?

Optional Matrix to transform the rectangle

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a basic chamfered rectangle
graphics
    .chamferRect(50, 50, 100, 80, 15)
    .fill({ color: 0xff0000 });

// Add transform and stroke
const transform = new Matrix()
    .rotate(Math.PI / 4); // 45 degrees

graphics
    .chamferRect(200, 50, 100, 80, 20, transform)
    .fill({ color: 0x00ff00 })
    .stroke({ width: 2, color: 0x000000 });

See

Graphics#roundRect For rounded corners
Graphics#filletRect For rounded corners with negative radius support

circle()

> circle(x, y, radius): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:714

Draws a circle shape at the specified location with the given radius.

Parameters

x

number

The x-coordinate of the center of the circle

y

number

The y-coordinate of the center of the circle

radius

number

The radius of the circle

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a simple filled circle
graphics
    .circle(100, 100, 50)
    .fill({ color: 0xff0000 });

// Draw a circle with gradient fill
const gradient = new FillGradient({
    end: { x: 1, y: 0 },
    colorStops: [
          { offset: 0, color: 0xff0000 }, // Red at start
          { offset: 0.5, color: 0x00ff00 }, // Green at middle
          { offset: 1, color: 0x0000ff }, // Blue at end
    ],
});

graphics
    .circle(250, 100, 40)
    .fill({ fill: gradient });

See

Graphics#ellipse For drawing ellipses
Graphics#arc For drawing partial circles

clear()

> clear(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1501

Clears all drawing commands from the graphics context, effectively resetting it. This includes clearing the current path, fill style, stroke style, and transformations.

> [!NOTE] Graphics objects are not designed to be continuously cleared and redrawn. > Instead, they are intended to be used for static or semi-static graphics that > can be redrawn as needed. Frequent clearing and redrawing may lead to performance issues.

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw some shapes
graphics
    .circle(100, 100, 50)
    .fill({ color: 0xff0000 })
    .rect(200, 100, 100, 50)
    .fill({ color: 0x00ff00 });

// Clear all graphics
graphics.clear();

// Start fresh with new shapes
graphics
    .circle(150, 150, 30)
    .fill({ color: 0x0000ff });

See

Graphics#beginPath For starting a new path without clearing styles
Graphics#save For saving the current state
Graphics#restore For restoring a previous state

clone()

> clone(deep?): Graphics

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1627

Creates a new Graphics object that copies the current graphics content. The clone can either share the same context (shallow clone) or have its own independent context (deep clone).

Parameters

deep?

boolean

Whether to create a deep clone of the graphics object. If false (default), the context will be shared between objects. If true, creates an independent copy of the context.

Returns

Graphics

A new Graphics instance with either shared or copied context

Example

const graphics = new Graphics();

// Create original graphics content
graphics
    .circle(100, 100, 50)
    .fill({ color: 0xff0000 });

// Create a shallow clone (shared context)
const shallowClone = graphics.clone();

// Changes to original affect the clone
graphics
    .circle(200, 100, 30)
    .fill({ color: 0x00ff00 });

// Create a deep clone (independent context)
const deepClone = graphics.clone(true);

// Modify deep clone independently
deepClone
    .translateTransform(100, 100)
    .circle(0, 0, 40)
    .fill({ color: 0x0000ff });

See

Graphics#context For accessing the underlying graphics context
GraphicsContext For understanding the shared context behavior

closePath()

> closePath(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:655

Closes the current path by drawing a straight line back to the start point.

This is useful for completing shapes and ensuring they are properly closed for fills.

Returns

this

The Graphics instance for method chaining

Example

// Create a triangle with closed path
const graphics = new Graphics();
graphics
    .moveTo(50, 50)
    .lineTo(100, 100)
    .lineTo(0, 100)
    .closePath()

See

Graphics#beginPath For starting a new path
Graphics#fill For filling closed paths
Graphics#stroke For stroking paths

collectRenderables()

> collectRenderables(instructionSet, renderer, currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:21

Internal

Collects all renderables from the container and its children, adding them to the instruction set. This method decides whether to use a simple or advanced collection method based on the container's properties.

Parameters

instructionSet

InstructionSet

The set of instructions to which the renderables will be added.

renderer

Renderer

The renderer responsible for rendering the scene.

currentLayer

ViewContainer.collectRenderables

The current render layer being processed.

Returns

void

Inherited from

collectRenderablesSimple()

> collectRenderablesSimple(instructionSet, renderer, currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/view/ViewContainer.d.ts:119

Internal

Collects renderables for the view container.

Parameters

instructionSet

InstructionSet

The instruction set to collect renderables for.

renderer

Renderer

The renderer to collect renderables for.

currentLayer

ViewContainer.collectRenderablesSimple

The current render layer.

Returns

void

Inherited from

collectRenderablesWithEffects()

> collectRenderablesWithEffects(instructionSet, renderer, currentLayer): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/collectRenderablesMixin.d.ts:39

Internal

Collects renderables using an advanced method, suitable for containers with complex processing needs. This method handles additional effects and transformations that may be applied to the renderables.

Parameters

instructionSet

InstructionSet

The set of instructions to which the renderables will be added.

renderer

Renderer

The renderer responsible for rendering the scene.

currentLayer

ViewContainer.collectRenderablesWithEffects

The current render layer being processed.

Returns

void

Inherited from

containsPoint()

> containsPoint(point): boolean

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:177

Checks if the object contains the given point. Returns true if the point lies within the Graphics object's rendered area.

Parameters

point

ViewContainer.containsPoint

The point to check in local coordinates

Returns

boolean

True if the point is inside the Graphics object

Example

const graphics = new Graphics();

// Draw a shape
graphics
    .rect(0, 0, 100, 100)
    .fill({ color: 0xff0000 });

// Check point intersection
if (graphics.containsPoint({ x: 50, y: 50 })) {
    console.log('Point is inside rectangle!');
}

See

Graphics#bounds For bounding box checks
PointData For point data structure

Inherited from

cut()

> cut(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:481

Applies a cutout to the last drawn shape. This is used to create holes or complex shapes by subtracting a path from the previously drawn path.

If a hole is not completely in a shape, it will fail to cut correctly.

Returns

this

Example

const graphics = new Graphics();

// Draw outer circle
graphics
    .circle(100, 100, 50)
    .fill({ color: 0xff0000 });
    .circle(100, 100, 25) // Inner circle
    .cut() // Cuts out the inner circle from the outer circle

destroy()

> destroy(options?): void

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:197

Destroys this graphics renderable and optionally its context.

Parameters

options?

DestroyOptions

Options parameter. A boolean will act as if all options

If the context was created by this graphics and destroy(false) or destroy() is called then the context will still be destroyed.

If you want to explicitly not destroy this context that this graphics created, then you should pass destroy({ context: false })

If the context was passed in as an argument to the constructor then it will not be destroyed

Returns

void

Example

// Destroy the graphics and its context
graphics.destroy();
graphics.destroy(true);
graphics.destroy({ context: true, texture: true, textureSource: true });

Inherited from

ViewContainer.destroy

disableRenderGroup()

> disableRenderGroup(): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:906

This will disable the render group for this container.

Returns

void

Advanced

Inherited from

ViewContainer.disableRenderGroup

dispatchEvent()

> dispatchEvent(e): boolean

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1094

Dispatch the event on this Container using the event's EventBoundary.

The target of the event is set to this and the defaultPrevented flag is cleared before dispatch.

Parameters

e

FederatedEvent

The event to dispatch.

Returns

boolean

Whether the preventDefault() method was not invoked.

Example

// Reuse a click event!
button.dispatchEvent(clickEvent);

Inherited from

ViewContainer.dispatchEvent

drawCircle()

> drawCircle(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1649

Parameters

args

...[number, number, number]

Returns

this

Deprecated

since 8.0.0 Use Graphics#circle instead

drawEllipse()

> drawEllipse(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1654

Parameters

args

...[number, number, number, number]

Returns

this

Deprecated

since 8.0.0 Use Graphics#ellipse instead

drawPolygon()

> drawPolygon(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1659

Parameters

args

...[number[] | PointData[], boolean]

Returns

this

Deprecated

since 8.0.0 Use Graphics#poly instead

drawRect()

> drawRect(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1664

Parameters

args

...[number, number, number, number]

Returns

this

Deprecated

since 8.0.0 Use Graphics#rect instead

drawRoundedRect()

> drawRoundedRect(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1669

Parameters

args

...[number, number, number, number, number]

Returns

this

Deprecated

since 8.0.0 Use Graphics#roundRect instead

drawStar()

> drawStar(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1674

Parameters

args

...[number, number, number, number, number, number]

Returns

this

Deprecated

since 8.0.0 Use Graphics#star instead

ellipse()

> ellipse(x, y, radiusX, radiusY): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:681

Draws an ellipse at the specified location and with the given x and y radii. An optional transformation can be applied, allowing for rotation, scaling, and translation.

Parameters

x

number

The x-coordinate of the center of the ellipse

y

number

The y-coordinate of the center of the ellipse

radiusX

number

The horizontal radius of the ellipse

radiusY

number

The vertical radius of the ellipse

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a basic ellipse
graphics
    .ellipse(100, 100, 50, 30)
    .fill({ color: 0xff0000 });

// Draw an ellipse with stroke
graphics
    .ellipse(200, 100, 70, 40)
    .stroke({ width: 2, color: 0x00ff00 });

See

Graphics#circle For drawing perfect circles
Graphics#arc For drawing partial circular arcs

emit()

> emit<T>(event, ...args): boolean

Defined in: node_modules/eventemitter3/index.d.ts:32

Calls each of the listeners registered for a given event.

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

args

...ArgumentMap<ContainerEvents<ContainerChild> & AnyEvent>[Extract<T, keyof ContainerEvents | keyof AnyEvent>]

Returns

boolean

Inherited from

ViewContainer.emit

enableRenderGroup()

> enableRenderGroup(): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:901

Calling this enables a render group for this container. This means it will be rendered as a separate set of instructions. The transform of the container will also be handled on the GPU rather than the CPU.

Returns

void

Advanced

Inherited from

ViewContainer.enableRenderGroup

endFill()

> endFill(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1644

Returns

this

Deprecated

since 8.0.0 Use Graphics#fill instead

eventNames()

> eventNames(): (keyof ContainerEvents | keyof AnyEvent)[]

Defined in: node_modules/eventemitter3/index.d.ts:15

Return an array listing the events for which the emitter has registered listeners.

Returns

(keyof ContainerEvents | keyof AnyEvent)[]

Inherited from

ViewContainer.eventNames

fill()

Call Signature

> fill(style?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:354

Fills the current or given path with the current fill style or specified style.

Parameters

style?

FillInput

The style to fill the path with. Can be:

A ColorSource
A gradient
A pattern
A complex style object If omitted, uses current fill style.

Returns

this

The Graphics instance for chaining

Example

const graphics = new Graphics();

// Fill with direct color
graphics
    .circle(50, 50, 25)
    .fill('red'); // Red fill

// Fill with texture
graphics
   .rect(0, 0, 100, 100)
   .fill(myTexture); // Fill with texture

// Fill with complex style
graphics
    .rect(0, 0, 100, 100)
    .fill({
        color: 0x00ff00,
        alpha: 0.5,
        texture: myTexture,
        matrix: new Matrix()
    });

// Fill with gradient
const gradient = new FillGradient({
    end: { x: 1, y: 0 },
    colorStops: [
        { offset: 0, color: 0xff0000 },
        { offset: 0.5, color: 0x00ff00 },
        { offset: 1, color: 0x0000ff },
    ],
});

graphics
    .circle(100, 100, 50)
    .fill(gradient);

See

FillStyle For fill style options
FillGradient For gradient fills
FillPattern For pattern fills

Call Signature

> fill(color, alpha?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:356

Parameters

color

alpha?

number

Returns

this

Deprecated

8.0.0

filletRect()

> filletRect(x, y, width, height, fillet): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1105

Draws a rectangle with fillet corners. Unlike rounded rectangles, this supports negative corner radii which create external rounded corners rather than internal ones.

Parameters

x

number

The x-coordinate of the top-left corner of the rectangle

y

number

The y-coordinate of the top-left corner of the rectangle

width

number

The width of the rectangle

height

number

The height of the rectangle

fillet

number

The radius of the corner fillets (can be positive or negative)

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a rectangle with internal fillets
graphics
    .filletRect(50, 50, 100, 80, 15)
    .fill({ color: 0xff0000 });

// Draw a rectangle with external fillets
graphics
    .filletRect(200, 50, 100, 80, -20)
    .fill({ color: 0x00ff00 })
    .stroke({ width: 2, color: 0x000000 });

See

Graphics#roundRect For standard rounded corners
Graphics#chamferRect For angled corners

getBounds()

> getBounds(skipUpdate?, bounds?): Bounds

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:88

Calculates and returns the (world) bounds of the display object as a Rectangle. Takes into account transforms and child bounds.

Parameters

skipUpdate?

boolean

Setting to true will stop the transforms of the scene graph from being updated. This means the calculation returned MAY be out of date BUT will give you a nice performance boost.

bounds?

Optional bounds to store the result of the bounds calculation

Returns

ViewContainer.getBounds

The minimum axis-aligned rectangle in world space that fits around this object

Example

// Basic bounds calculation
const bounds = sprite.getBounds();
console.log(`World bounds: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height}`);

// Reuse bounds object for performance
const recycleBounds = new Bounds();
sprite.getBounds(false, recycleBounds);

// Skip update for performance
const fastBounds = sprite.getBounds(true);

Remarks

Includes transform calculations
Updates scene graph by default
Can reuse bounds objects
Common in hit testing

See

Container#getLocalBounds For untransformed bounds
Bounds For bounds properties

Inherited from

getChildAt()

> getChildAt<U>(index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:85

Returns the child at the specified index.

Type Parameters

U

U extends ContainerChild

Parameters

index

number

The index to get the child from

Returns

U

The child at the given index

Example

// Get first child
const first = container.getChildAt(0);

// Type-safe access
const sprite = container.getChildAt<Sprite>(1);

// With error handling
try {
    const child = container.getChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}

Throws

If index is out of bounds

See

Container#children For direct array access
Container#getChildByLabel For name-based lookup

Inherited from

ViewContainer.getChildAt

getChildByLabel()

> getChildByLabel(label, deep?): Container<ContainerChild> | null

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:53

Returns the first child in the container with the specified label. Recursive searches are done in a pre-order traversal.

Parameters

label

string | RegExp

Instance label to search for

deep?

boolean

Whether to search recursively through children

Returns

Container<ContainerChild> | null

The first child with the specified label, or null if none found

Example

// Basic label search
const child = container.getChildByLabel('player');

// Search with regular expression
const enemy = container.getChildByLabel(/enemy-\d+/);

// Deep search through children
const deepChild = container.getChildByLabel('powerup', true);

See

Container#getChildrenByLabel For finding all matches
Container#label For setting labels

Inherited from

ViewContainer.getChildByLabel

getChildByName()

> getChildByName(label, deep?): Container<ContainerChild> | null

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:32

Parameters

label

string | RegExp

Instance name.

deep?

boolean

Whether to search recursively

Returns

Container<ContainerChild> | null

The child with the specified name.

Deprecated

since 8.0.0

See

Container#getChildByLabel

Inherited from

ViewContainer.getChildByName

getChildIndex()

> getChildIndex(child): number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:130

Returns the index position of a child Container instance.

Parameters

child

ContainerChild

The Container instance to identify

Returns

number

The index position of the child container

Example

// Basic index lookup
const index = container.getChildIndex(sprite);
console.log(`Sprite is at index ${index}`);

// With error handling
try {
    const index = container.getChildIndex(sprite);
} catch (e) {
    console.warn('Child not found in container');
}

Throws

If child is not in this container

See

Container#setChildIndex For changing index
Container#children For direct array access

Inherited from

ViewContainer.getChildIndex

getChildrenByLabel()

> getChildrenByLabel(label, deep?, out?): Container<ContainerChild>[]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/findMixin.d.ts:74

Returns all children in the container with the specified label. Recursive searches are done in a pre-order traversal.

Parameters

label

string | RegExp

Instance label to search for

deep?

boolean

Whether to search recursively through children

out?

Container<ContainerChild>[]

Optional array to store matching children in

Returns

Container<ContainerChild>[]

An array of children with the specified label

Example

// Basic label search
const enemies = container.getChildrenByLabel('enemy');
// Search with regular expression
const powerups = container.getChildrenByLabel(/powerup-\d+/);
// Deep search with collection
const buttons = [];
container.getChildrenByLabel('button', true, buttons);

See

Container#getChildByLabel For finding first match
Container#label For setting labels

Inherited from

ViewContainer.getChildrenByLabel

getFastGlobalBounds()

> getFastGlobalBounds(factorRenderLayers?, bounds?): Bounds

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getFastGlobalBoundsMixin.d.ts:23

Computes an approximate global bounding box for the container and its children. This method is optimized for speed by using axis-aligned bounding boxes (AABBs), and uses the last render results from when it updated the transforms. This function does not update them. which may result in slightly larger bounds but never smaller than the actual bounds.

for accurate (but less performant) results use container.getGlobalBounds

Parameters

factorRenderLayers?

boolean

A flag indicating whether to consider render layers in the calculation.

bounds?

The output bounds object to store the result. If not provided, a new one is created.

Returns

ViewContainer.getFastGlobalBounds

The computed bounds.

Advanced

Inherited from

getGlobalAlpha()

> getGlobalAlpha(skipUpdate?): number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:35

Returns the global (compound) alpha of the container within the scene.

Parameters

skipUpdate?

boolean

Performance optimization flag:

If false (default): Recalculates the entire alpha chain through parents for accuracy
If true: Uses cached worldAlpha from the last render pass for better performance

Returns

number

The resulting alpha value (between 0 and 1)

Example

// Accurate but slower - recalculates entire alpha chain
const preciseAlpha = container.getGlobalAlpha();

// Faster but may be outdated - uses cached alpha
const cachedAlpha = container.getGlobalAlpha(true);

Inherited from

ViewContainer.getGlobalAlpha

getGlobalPosition()

> getGlobalPosition(point?, skipUpdate?): Point

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:36

Returns the global position of the container, taking into account the container hierarchy.

Parameters

point?

Point

The optional point to write the global value to

skipUpdate?

boolean

Should we skip the update transform

Returns

Point

The updated point

Example

// Basic position check
const globalPos = sprite.getGlobalPosition();
console.log(`Global: (${globalPos.x}, ${globalPos.y})`);

// Reuse point object
const point = new Point();
sprite.getGlobalPosition(point);

// Skip transform update for performance
const fastPos = container.getGlobalPosition(undefined, true);

See

Container#toGlobal For converting specific points
Container#toLocal For converting to local space

Inherited from

ViewContainer.getGlobalPosition

getGlobalTint()

> getGlobalTint(skipUpdate?): number

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:72

Returns the global (compound) tint color of the container within the scene.

Parameters

skipUpdate?

boolean

Performance optimization flag:

If false (default): Recalculates the entire tint chain through parents for accuracy
If true: Uses cached worldColor from the last render pass for better performance

Returns

number

The resulting tint color as a 24-bit RGB number (0xRRGGBB)

Example

// Accurate but slower - recalculates entire tint chain
const preciseTint = container.getGlobalTint();

// Faster but may be outdated - uses cached tint
const cachedTint = container.getGlobalTint(true);

Inherited from

ViewContainer.getGlobalTint

getGlobalTransform()

> getGlobalTransform(matrix?, skipUpdate?): Matrix

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/getGlobalMixin.d.ts:56

Returns the global transform matrix of the container within the scene.

Parameters

matrix?

Optional matrix to store the result. If not provided, a new Matrix will be created.

skipUpdate?

boolean

Performance optimization flag:

If false (default): Recalculates the entire transform chain for accuracy
If true: Uses cached worldTransform from the last render pass for better performance

Returns

ViewContainer.getGlobalTransform

The resulting transformation matrix (either the input matrix or a new one)

Example

// Accurate but slower - recalculates entire transform chain
const preciseTransform = container.getGlobalTransform();

// Faster but may be outdated - uses cached transform
const cachedTransform = container.getGlobalTransform(undefined, true);

// Reuse existing matrix
const existingMatrix = new Matrix();
container.getGlobalTransform(existingMatrix);

Inherited from

getLocalBounds()

> getLocalBounds(): Bounds

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/measureMixin.d.ts:58

Retrieves the local bounds of the container as a Bounds object. Uses cached values when possible for better performance.

Returns

ViewContainer.getLocalBounds

The bounding area

Example

// Basic bounds check
const bounds = container.getLocalBounds();
console.log(`Width: ${bounds.width}, Height: ${bounds.height}`);
// subsequent calls will reuse the cached bounds
const cachedBounds = container.getLocalBounds();
console.log(bounds === cachedBounds); // true

See

Container#getBounds For world space bounds
Bounds For bounds properties

Inherited from

getSize()

> getSize(out?): Size

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1136

Retrieves the size of the container as a [Size]Size object.

This is faster than get the width and height separately.

Parameters

out?

Size

Optional object to store the size in.

Returns

Size

The size of the container.

Example

// Basic size retrieval
const size = container.getSize();
console.log(`Size: ${size.width}x${size.height}`);

// Reuse existing size object
const reuseSize = { width: 0, height: 0 };
container.getSize(reuseSize);

Inherited from

ViewContainer.getSize

getTransform()

> getTransform(): Matrix

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1286

Returns the current transformation matrix of the graphics context. This matrix represents all accumulated transformations including translate, scale, and rotate.

Returns

The current transformation matrix.

Example

const graphics = new Graphics();

// Apply some transformations
graphics
    .translateTransform(100, 100)
    .rotateTransform(Math.PI / 4);

// Get the current transform matrix
const matrix = graphics.getTransform();
console.log(matrix.tx, matrix.ty); // 100, 100

// Use the matrix for other operations
graphics
    .setTransform(matrix)
    .circle(0, 0, 50)
    .fill({ color: 0xff0000 });

See

Graphics#setTransform For setting the transform matrix
Matrix For matrix operations

lineStyle()

> lineStyle(width?, color?, alpha?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1634

Parameters

width?

number

color?

alpha?

number

Returns

this

Deprecated

since 8.0.0 Use Graphics#setStrokeStyle instead

lineTo()

> lineTo(x, y): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:769

Connects the current point to a new point with a straight line. Any subsequent drawing commands will start from this new point.

Parameters

x

number

The x-coordinate of the line's end point

y

number

The y-coordinate of the line's end point

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a triangle
graphics
    .moveTo(50, 50)
    .lineTo(100, 100)
    .lineTo(0, 100)
    .fill({ color: 0xff0000 });

// Create a complex shape with multiple lines
graphics
    .moveTo(200, 50)
    .lineTo(250, 50)
    .lineTo(250, 100)
    .lineTo(200, 100)
    .stroke({ width: 2, color: 0x00ff00 });

See

Graphics#moveTo For starting a new sub-path

listenerCount()

> listenerCount(event): number

Defined in: node_modules/eventemitter3/index.d.ts:27

Return the number of listeners listening to a given event.

Parameters

event

keyof ContainerEvents | keyof AnyEvent

Returns

number

Inherited from

ViewContainer.listenerCount

listeners()

> listeners<T>(event): (...args) => void[]

Defined in: node_modules/eventemitter3/index.d.ts:20

Return the listeners registered for a given event.

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

Returns

(...args) => void[]

Inherited from

ViewContainer.listeners

moveTo()

> moveTo(x, y): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:812

Sets the starting point for a new sub-path.

Moves the "pen" to a new location without drawing a line. Any subsequent drawing commands will start from this point.

Parameters

x

number

The x-coordinate to move to

y

number

The y-coordinate to move to

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Create multiple separate lines
graphics
    .moveTo(50, 50)
    .lineTo(100, 50)
    .moveTo(50, 100)    // Start a new line
    .lineTo(100, 100)
    .stroke({ width: 2, color: 0xff0000 });

// Create disconnected shapes
graphics
    .moveTo(150, 50)
    .rect(150, 50, 50, 50)
    .fill({ color: 0x00ff00 })
    .moveTo(250, 50)    // Start a new shape
    .circle(250, 75, 25)
    .fill({ color: 0x0000ff });

// Position before curved paths
graphics
    .moveTo(300, 50)
    .bezierCurveTo(
        350, 25,   // Control point 1
        400, 75,   // Control point 2
        450, 50    // End point
    )
    .stroke({ width: 3, color: 0xff00ff });

See

Graphics#lineTo For drawing lines
Graphics#beginPath For starting a completely new path

off()

> off<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:69

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

ViewContainer.off

on()

> on<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:40

Add a listener for a given event.

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

ViewContainer.on

once()

> once<T>(event, fn, context?): this

Defined in: node_modules/eventemitter3/index.d.ts:54

Add a one-time listener for a given event.

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

fn

(...args) => void

context?

any

Returns

this

Inherited from

ViewContainer.once

path()

> path(path): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:741

Adds another GraphicsPath to this path, optionally applying a transformation. This allows for reuse of complex paths and shapes across different graphics instances.

Parameters

path

GraphicsPath

The GraphicsPath to add to the current path

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();
// Create a reusable path
const heartPath = new GraphicsPath()
    .moveTo(0, 0)
    .bezierCurveTo(-50, -25, -50, -75, 0, -100)
    .bezierCurveTo(50, -75, 50, -25, 0, 0);

// Use the path multiple times
graphics
    .path(heartPath)
    .fill({ color: 0xff0000 })
    .translateTransform(200, 200)
    .path(heartPath)
    .fill({ color: 0xff0000, alpha: 0.5 });

See

GraphicsPath For creating reusable paths
Matrix For creating transformations
Graphics#transform For applying transformations

poly()

> poly(points, close?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:945

Draws a polygon shape by specifying a sequence of points. This method allows for the creation of complex polygons, which can be both open and closed.

An optional transformation can be applied, enabling the polygon to be scaled, rotated, or translated as needed.

Parameters

points

number[] | PointData[]

An array of numbers [x1,y1, x2,y2, ...] or an array of point objects [{x,y}, ...] representing the vertices of the polygon in sequence

close?

boolean

Whether to close the polygon path by connecting the last point to the first. Default is true.

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a triangle using array of numbers [x1,y1, x2,y2, x3,y3]
graphics
    .poly([50,50, 100,100, 0,100], true)
    .fill({ color: 0xff0000 });

// Draw a polygon using point objects
graphics
    .poly([
        { x: 200, y: 50 },
        { x: 250, y: 100 },
        { x: 200, y: 150 },
        { x: 150, y: 100 }
    ])
    .fill({ color: 0x00ff00 });

// Draw an open polygon with stroke
graphics
    .poly([300,50, 350,50, 350,100, 300,100], false)
    .stroke({
        width: 2,
        color: 0x0000ff,
        join: 'round'
    });

See

Graphics#regularPoly For drawing regular polygons
Graphics#roundPoly For drawing polygons with rounded corners
Graphics#star For drawing star shapes

quadraticCurveTo()

> quadraticCurveTo(cpx, cpy, x, y, smoothness?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:850

Adds a quadratic curve to the path. It requires two points: the control point and the end point. The starting point is the last point in the current path.

Parameters

cpx

number

The x-coordinate of the control point

cpy

number

The y-coordinate of the control point

x

number

The x-coordinate of the end point

y

number

The y-coordinate of the end point

smoothness?

number

Optional parameter to adjust the curve's smoothness (0-1)

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a simple curve
graphics
    .moveTo(50, 50)
    .quadraticCurveTo(100, 25, 150, 50)
    .stroke({ width: 2, color: 0xff0000 });

// Adjust curve smoothness
graphics
    .moveTo(50, 200)
    .quadraticCurveTo(
        150, 150,   // Control point
        250, 200,   // End point
        0.5         // Smoothness factor
    )
    .stroke({
        width: 4,
        color: 0x0000ff,
        alpha: 0.7
    });

See

Graphics#bezierCurveTo For curves with two control points
Graphics#arc For circular arcs
Graphics#arcTo For connecting points with circular arcs

rect()

> rect(x, y, w, h): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:878

Draws a rectangle shape.

This method adds a new rectangle path to the current drawing.

Parameters

x

number

The x-coordinate of the top-left corner of the rectangle

y

number

The y-coordinate of the top-left corner of the rectangle

w

number

The width of the rectangle

h

number

The height of the rectangle

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a simple filled rectangle
graphics
    .rect(50, 50, 100, 75)
    .fill({ color: 0xff0000 });

// Rectangle with stroke
graphics
    .rect(200, 50, 100, 75)
    .stroke({ width: 2, color: 0x00ff00 });

See

Graphics#roundRect For drawing rectangles with rounded corners
Graphics#filletRect For drawing rectangles with filleted corners
Graphics#chamferRect For drawing rectangles with chamfered corners

regularPoly()

> regularPoly(x, y, radius, sides, rotation?, transform?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:989

Draws a regular polygon with a specified number of sides. All sides and angles are equal, making shapes like triangles, squares, pentagons, etc.

Parameters

x

number

The x-coordinate of the center of the polygon

y

number

The y-coordinate of the center of the polygon

radius

number

The radius of the circumscribed circle of the polygon

sides

number

The number of sides of the polygon (must be 3 or more)

rotation?

number

The rotation angle of the polygon in radians (default: 0)

transform?

ViewContainer.removeChild

Optional Matrix to transform the polygon's shape

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a simple triangle (3 sides)
graphics
    .regularPoly(100, 100, 50, 3)
    .fill({ color: 0xff0000 });

// Draw a hexagon (6 sides) with rotation
graphics
    .regularPoly(
        250, 100,    // center position
        40,          // radius
        6,           // sides
        Math.PI / 6  // rotation (30 degrees)
    )
    .fill({ color: 0x00ff00 })
    .stroke({ width: 2, color: 0x000000 });

// Draw an octagon (8 sides) with transform
const transform = new Matrix()
    .scale(1.5, 1)      // stretch horizontally
    .rotate(Math.PI/4); // rotate 45 degrees

graphics
    .regularPoly(400, 100, 30, 8, 0, transform)
    .fill({ color: 0x0000ff, alpha: 0.5 });

See

Graphics#poly For drawing custom polygons
Graphics#roundPoly For drawing polygons with rounded corners
Graphics#star For drawing star shapes

removeAllListeners()

> removeAllListeners(event?): this

Defined in: node_modules/eventemitter3/index.d.ts:79

Remove all listeners, or those of the specified event.

Parameters

event?

keyof ContainerEvents | keyof AnyEvent

Returns

this

Inherited from

ViewContainer.removeAllListeners

removeChild()

> removeChild<U>(...children): U[0]

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:885

Removes one or more children from the container. When removing multiple children, events will be triggered for each child in sequence.

Type Parameters

U

U extends ContainerChild[]

Parameters

children

...U

The Container(s) to remove

Returns

U[0]

The first child that was removed

Example

// Remove a single child
const removed = container.removeChild(sprite);

// Remove multiple children
const bg = container.removeChild(background, player, userInterface);

// Remove with type checking
const sprite = container.removeChild<Sprite>(childSprite);
sprite.texture = newTexture;

See

Container#addChild For adding children
Container#removeChildren For removing multiple children

Inherited from

removeChildAt()

> removeChildAt<U>(index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:61

Removes a child from the specified index position.

Type Parameters

U

U extends ContainerChild

Parameters

index

number

The index to remove the child from

Returns

U

The child that was removed

Example

// Remove first child
const removed = container.removeChildAt(0);

// type safe access
const sprite = container.removeChildAt<Sprite>(1);

// With error handling
try {
    const child = container.removeChildAt(10);
} catch (e) {
    console.warn('Index out of bounds');
}

Throws

If index is out of bounds

See

Container#removeChild For removing specific children
Container#removeChildren For removing multiple children

Inherited from

ViewContainer.removeChildAt

removeChildren()

> removeChildren(beginIndex?, endIndex?): ContainerChild[]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:37

Removes all children from this container that are within the begin and end indexes.

Parameters

beginIndex?

number

The beginning position

endIndex?

number

The ending position. Default is container size

Returns

ContainerChild[]

List of removed children

Example

// Remove all children
container.removeChildren();

// Remove first 3 children
const removed = container.removeChildren(0, 3);
console.log('Removed:', removed.length); // 3

// Remove children from index 2 onwards
container.removeChildren(2);

// Remove specific range
const middle = container.removeChildren(1, 4);

Throws

If begin/end indexes are invalid

See

Container#addChild For adding children
Container#removeChild For removing specific children

Inherited from

ViewContainer.removeChildren

removeEventListener()

Call Signature

> removeEventListener<K>(type, listener, options?): void

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1082

Unlike off or removeListener which are methods from EventEmitter, removeEventListener seeks to be compatible with the DOM's removeEventListener with support for options.

Type Parameters

K

K extends keyof FederatedEventMap | keyof GlobalFederatedEventMap

Parameters

type

K

The type of event the listener is bound to.

listener

(e) => any

The listener callback or object.

options?

RemoveListenerOptions

The original listener options. This is required to deregister a capture phase listener.

Returns

void

Inherited from

ViewContainer.removeEventListener

Call Signature

> removeEventListener(type, listener, options?): void

Defined in: node_modules/pixi.js/lib/events/FederatedEventTarget.d.ts:1083

Parameters

type

string

listener

EventListenerOrEventListenerObject

options?

RemoveListenerOptions

Returns

void

Inherited from

ViewContainer.removeEventListener

removeFromParent()

> removeFromParent(): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:203

Remove the Container from its parent Container. If the Container has no parent, do nothing.

Returns

void

Example

// Basic removal
sprite.removeFromParent();

// With validation
if (sprite.parent) {
    sprite.removeFromParent();
}

See

Container#addChild For adding to a new parent
Container#removeChild For parent removing children

Inherited from

ViewContainer.removeFromParent

removeListener()

> removeListener<T>(event, fn?, context?, once?): this

Defined in: node_modules/eventemitter3/index.d.ts:63

Remove the listeners of a given event.

Type Parameters

T

T extends keyof ContainerEvents | keyof AnyEvent

Parameters

event

T

fn?

(...args) => void

context?

any

once?

boolean

Returns

this

Inherited from

ViewContainer.removeListener

reparentChild()

> reparentChild<U>(...child): U[0]

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:224

Reparent a child or multiple children to this container while preserving their world transform. This ensures that the visual position and rotation of the children remain the same even when changing parents.

Type Parameters

U

U extends ContainerChild[]

Parameters

child

...U

The child or children to reparent

Returns

U[0]

The first child that was reparented

Example

// Basic reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent, keeping visual position
newContainer.reparentChild(sprite);

// Reparent multiple children
const batch = [sprite1, sprite2, sprite3];
newContainer.reparentChild(...batch);

See

Container#reparentChildAt For index-specific reparenting
Container#addChild For simple parenting

Inherited from

ViewContainer.reparentChild

reparentChildAt()

> reparentChildAt<U>(child, index): U

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:243

Reparent the child to this container at the specified index while preserving its world transform. This ensures that the visual position and rotation of the child remain the same even when changing parents.

Type Parameters

U

U extends ContainerChild

Parameters

child

U

The child to reparent

index

number

The index to reparent the child to

Returns

U

The reparented child

Example

// Basic index-specific reparenting
const sprite = new Sprite(texture);
oldContainer.addChild(sprite);
// Move to new parent at index 0 (front)
newContainer.reparentChildAt(sprite, 0);

Throws

If index is out of bounds

See

Container#reparentChild For appending reparented children
Container#addChildAt For simple indexed parenting

Inherited from

ViewContainer.reparentChildAt

replaceChild()

> replaceChild<U, T>(oldChild, newChild): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:249

Replace a child in the container with a new child. Copying the local transform from the old child to the new one.

Type Parameters

U

U extends ContainerChild

T

T extends ContainerChild

Parameters

oldChild

U

The child to replace.

newChild

T

The new child to add.

Returns

void

Inherited from

ViewContainer.replaceChild

resetTransform()

> resetTransform(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1312

Resets the current transformation matrix to the identity matrix, effectively removing any transformations (rotation, scaling, translation) previously applied.

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Apply transformations
graphics
    .translateTransform(100, 100)
    .scaleTransform(2, 2)
    .circle(0, 0, 25)
    .fill({ color: 0xff0000 });
// Reset transform to default state
graphics
    .resetTransform()
    .circle(50, 50, 25) // Will draw at actual coordinates
    .fill({ color: 0x00ff00 });

See

Graphics#getTransform For getting the current transform
Graphics#setTransform For setting a specific transform
Graphics#save For saving the current transform state
Graphics#restore For restoring a previous transform state

restore()

> restore(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1223

Restores the most recently saved graphics state by popping the top of the graphics state stack. This includes transformations, fill styles, and stroke styles.

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Save current state
graphics.save();

// Make temporary changes
graphics
    .translateTransform(100, 100)
    .setFillStyle({ color: 0xff0000 })
    .circle(0, 0, 50)
    .fill();

// Restore to previous state
graphics.restore();

// Draw with original transform and styles
graphics
    .circle(50, 50, 30)
    .fill();

See

Graphics#save For saving the current state

rotateTransform()

> rotateTransform(angle): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1331

Applies a rotation transformation to the graphics context around the current origin. Positive angles rotate clockwise, while negative angles rotate counterclockwise.

Parameters

angle

number

The angle of rotation in radians

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Rotate 45 degrees clockwise
graphics
    .rotateTransform(Math.PI / 4)
    .rect(-25, -25, 50, 50)
    .fill({ color: 0xff0000 });

See

Graphics#scaleTransform For scaling transformations
Graphics#translateTransform For position transformations

roundPoly()

> roundPoly(x, y, radius, sides, corner, rotation?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1026

Draws a polygon with rounded corners.

Similar to regularPoly but with the ability to round the corners of the polygon.

Parameters

x

number

The x-coordinate of the center of the polygon

y

number

The y-coordinate of the center of the polygon

radius

number

The radius of the circumscribed circle of the polygon

sides

number

The number of sides of the polygon (must be 3 or more)

corner

number

The radius of the corner rounding (must be non-negative)

rotation?

number

The rotation angle of the polygon in radians (default: 0)

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a basic rounded triangle
graphics
    .roundPoly(100, 100, 50, 3, 10)
    .fill({ color: 0xff0000 });

// Draw a rounded hexagon with rotation
graphics
    .roundPoly(
        250, 150,     // center position
        40,           // radius
        6,            // sides
        8,            // corner radius
        Math.PI / 6   // rotation (30 degrees)
    )
    .fill({ color: 0x00ff00 })
    .stroke({ width: 2, color: 0x000000 });

See

Graphics#regularPoly For drawing polygons without rounded corners
Graphics#poly For drawing custom polygons
Graphics#roundRect For drawing rectangles with rounded corners

roundRect()

> roundRect(x, y, w, h, radius?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:901

Draws a rectangle with rounded corners. The corner radius can be specified to determine how rounded the corners should be.

Parameters

x

number

The x-coordinate of the top-left corner of the rectangle

y

number

The y-coordinate of the top-left corner of the rectangle

w

number

The width of the rectangle

h

number

The height of the rectangle

radius?

number

The radius of the rectangle's corners (must be non-negative)

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Basic rounded rectangle
graphics
    .roundRect(50, 50, 100, 75, 15)
    .fill({ color: 0xff0000 });

See

Graphics#rect For drawing rectangles with sharp corners
Graphics#filletRect For drawing rectangles with filleted corners
Graphics#chamferRect For drawing rectangles with chamfered corners

roundShape()

> roundShape(points, radius, useQuadratic?, smoothness?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1077

Draws a shape with rounded corners. This function supports custom radius for each corner of the shape. Optionally, corners can be rounded using a quadratic curve instead of an arc, providing a different aesthetic.

Parameters

points

RoundedPoint[]

An array of RoundedPoint representing the corners of the shape. Each point can have its own radius or use the default. A minimum of 3 points is required.

radius

number

The default radius for corners without a specific radius defined. Applied to any point that doesn't specify its own radius.

useQuadratic?

boolean

When true, corners are drawn using quadratic curves instead of arcs, creating a different visual style. Defaults to false.

smoothness?

number

Controls the smoothness of quadratic corners when useQuadratic is true. Values range from 0-1, higher values create smoother curves.

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a custom shape with rounded corners
graphics
    .roundShape([
        { x: 100, y: 100, radius: 20 },
        { x: 200, y: 100, radius: 10 },
        { x: 200, y: 200, radius: 15 },
        { x: 100, y: 200, radius: 5 }
    ], 10)
    .fill({ color: 0xff0000 });

// Using quadratic curves for corners
graphics
    .roundShape([
        { x: 250, y: 100 },
        { x: 350, y: 100 },
        { x: 350, y: 200 },
        { x: 250, y: 200 }
    ], 15, true, 0.5)
    .fill({ color: 0x00ff00 })
    .stroke({ width: 2, color: 0x000000 });

// Shape with varying corner radii
graphics
    .roundShape([
        { x: 400, y: 100, radius: 30 },
        { x: 500, y: 100, radius: 5 },
        { x: 450, y: 200, radius: 15 }
    ], 10)
    .fill({ color: 0x0000ff, alpha: 0.5 });

See

Graphics#roundRect For drawing rectangles with rounded corners
Graphics#roundPoly For drawing regular polygons with rounded corners

save()

> save(): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1259

Saves the current graphics state onto a stack. The state includes:

Current transformation matrix
Current fill style
Current stroke style

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Save state before complex operations
graphics.save();

// Create transformed and styled shape
graphics
    .translateTransform(100, 100)
    .rotateTransform(Math.PI / 4)
    .setFillStyle({
        color: 0xff0000,
        alpha: 0.5
    })
    .rect(-25, -25, 50, 50)
    .fill();

// Restore to original state
graphics.restore();

// Continue drawing with previous state
graphics
    .circle(50, 50, 25)
    .fill();

See

Graphics#restore For restoring the saved state
Graphics#setTransform For setting transformations

scaleTransform()

> scaleTransform(x, y?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1357

Applies a scaling transformation to the graphics context, scaling drawings by x horizontally and by y vertically relative to the current origin.

Parameters

x

number

The scale factor in the horizontal direction

y?

number

The scale factor in the vertical direction. If omitted, equals x

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Uniform scaling
graphics
    .scaleTransform(2)  // Scale both dimensions by 2
    .circle(0, 0, 25)
    .fill({ color: 0xff0000 });

// Non-uniform scaling
graphics
    .scaleTransform(0.5, 2)  // Half width, double height
    .rect(100, 100, 50, 50)
    .fill({ color: 0x00ff00 });

See

Graphics#rotateTransform For rotation transformations
Graphics#translateTransform For position transformations

setChildIndex()

> setChildIndex(child, index): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:108

Changes the position of an existing child in the container.

Parameters

child

ContainerChild

The child Container instance to reposition

index

number

The resulting index number for the child

Returns

void

Example

// Basic index change
container.setChildIndex(sprite, 0); // Move to front
container.setChildIndex(sprite, container.children.length - 1); // Move to back

// With error handling
try {
    container.setChildIndex(sprite, 5);
} catch (e) {
    console.warn('Invalid index or child not found');
}

Throws

If index is out of bounds

Throws

If child is not in container

See

Container#getChildIndex For getting current index
Container#swapChildren For swapping positions

Inherited from

ViewContainer.setChildIndex

setFillStyle()

> setFillStyle(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:248

Sets the current fill style of the graphics context. The fill style can be a color, gradient, pattern, or a complex style object.

Parameters

args

...[FillInput]

The fill style to apply

Returns

this

The Graphics instance for chaining

Example

const graphics = new Graphics();

// Basic color fill
graphics
    .setFillStyle({ color: 0xff0000 }) // Red fill
    .rect(0, 0, 100, 100)
    .fill();

// Gradient fill
const gradient = new FillGradient({
   end: { x: 1, y: 0 },
   colorStops: [
        { offset: 0, color: 0xff0000 }, // Red at start
        { offset: 0.5, color: 0x00ff00 }, // Green at middle
        { offset: 1, color: 0x0000ff }, // Blue at end
   ],
});

graphics
    .setFillStyle(gradient)
    .circle(100, 100, 50)
    .fill();

// Pattern fill
const pattern = new FillPattern(texture);
graphics
    .setFillStyle({
        fill: pattern,
        alpha: 0.5
    })
    .rect(0, 0, 200, 200)
    .fill();

See

FillStyle For fill style options
FillGradient For gradient fills
FillPattern For pattern fills

setFromMatrix()

> setFromMatrix(matrix): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1223

Updates the local transform properties by decomposing the given matrix. Extracts position, scale, rotation, and skew from a transformation matrix.

Parameters

matrix

ViewContainer.setFromMatrix

The matrix to use for updating the transform

Returns

void

Example

// Basic matrix transform
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4)
    .scale(2, 2);

container.setFromMatrix(matrix);

// Copy transform from another container
const source = new Container();
source.position.set(100, 100);
source.rotation = Math.PI / 2;

target.setFromMatrix(source.localTransform);

// Reset transform
container.setFromMatrix(Matrix.IDENTITY);

See

Container#updateTransform For property-based updates
Matrix#decompose For matrix decomposition details

Inherited from

setMask()

> setMask(options): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/effectsMixin.d.ts:229

Used to set mask and control mask options on a display object. Allows for more detailed control over masking behavior compared to the mask property.

Parameters

options

Partial<MaskOptionsAndMask>

Configuration options for the mask

Returns

void

Example

import { Graphics, Sprite } from 'pixi.js';

// Create a circular mask
const graphics = new Graphics()
    .beginFill(0xFF3300)
    .drawCircle(100, 100, 50)
    .endFill();

// Apply mask with options
sprite.setMask({
    mask: graphics,
    inverse: true, // Create a hole effect
});

// Use the alpha channel for masking (useful for sprites with transparency)
sprite.setMask({
    mask: maskSprite,
    channel: 'alpha',
});

// Clear existing mask
sprite.setMask({ mask: null });

See

Container#mask For simple masking
MaskOptionsAndMask For full options API
MaskOptions#channel For channel selection

Inherited from

ViewContainer.setMask

setSize()

> setSize(value, height?): void

Defined in: node_modules/pixi.js/lib/scene/container/Container.d.ts:1151

Sets the size of the container to the specified width and height. This is more efficient than setting width and height separately as it only recalculates bounds once.

Parameters

value

number | Optional<Size, "height">

This can be either a number or a [Size]Size object.

height?

number

The height to set. Defaults to the value of width if not provided.

Returns

void

Example

// Basic size setting
container.setSize(100, 200);

// Set uniform size
container.setSize(100); // Sets both width and height to 100

Inherited from

ViewContainer.setSize

setStrokeStyle()

> setStrokeStyle(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:302

Sets the current stroke style of the graphics context. Similar to fill styles, stroke styles can encompass colors, gradients, patterns, or more detailed configurations.

Parameters

args

...[StrokeInput]

The stroke style to apply

Returns

this

The Graphics instance for chaining

Example

const graphics = new Graphics();

// Basic color stroke
graphics
    .setStrokeStyle({
        width: 2,
        color: 0x000000
    })
    .rect(0, 0, 100, 100)
    .stroke();

// Complex stroke style
graphics
    .setStrokeStyle({
        width: 4,
        color: 0xff0000,
        alpha: 0.5,
        join: 'round',
        cap: 'round',
        alignment: 0.5
    })
    .circle(100, 100, 50)
    .stroke();

// Gradient stroke
const gradient = new FillGradient({
   end: { x: 1, y: 0 },
   colorStops: [
        { offset: 0, color: 0xff0000 }, // Red at start
        { offset: 0.5, color: 0x00ff00 }, // Green at middle
        { offset: 1, color: 0x0000ff }, // Blue at end
   ],
});

graphics
    .setStrokeStyle({
        width: 10,
        fill: gradient
    })
    .poly([0,0, 100,50, 0,100])
    .stroke();

See

StrokeStyle For stroke style options
FillGradient For gradient strokes
FillPattern For pattern strokes

setTransform()

Call Signature

> setTransform(transform): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1390

Sets the current transformation matrix of the graphics context.

This method can either take a Matrix object or individual transform values to create a new transformation matrix.

Parameters

transform

ViewContainer.swapChildren

The matrix to set as the current transformation matrix.

Returns

this

The instance of the current GraphicsContext for method chaining.

Example

const graphics = new Graphics();

// Using a Matrix object
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4);

graphics
    .setTransform(matrix)
    .rect(0, 0, 50, 50)
    .fill({ color: 0xff0000 });

// Using individual transform values
graphics
    .setTransform(
        2, 0,     // scale x by 2
        0, 1,     // no skew
        100, 100  // translate x,y by 100
    )
    .circle(0, 0, 25)
    .fill({ color: 0x00ff00 });

Call Signature

> setTransform(a, b, c, d, dx, dy): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1402

Sets the current transformation matrix of the graphics context to the specified matrix or values. This replaces the current transformation matrix.

Parameters

a

number

The value for the a property of the matrix, or a Matrix object to use directly.

b

number

The value for the b property of the matrix.

c

number

The value for the c property of the matrix.

d

number

The value for the d property of the matrix.

dx

number

The value for the tx (translate x) property of the matrix.

dy

number

The value for the ty (translate y) property of the matrix.

Returns

this

The instance of the current GraphicsContext for method chaining.

Call Signature

> setTransform(a, b?, c?, d?, dx?, dy?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1403

Sets the current transformation matrix of the graphics context.

This method can either take a Matrix object or individual transform values to create a new transformation matrix.

Parameters

a

number | Matrix

b?

number

c?

number

d?

number

dx?

number

dy?

number

Returns

this

The instance of the current GraphicsContext for method chaining.

Example

const graphics = new Graphics();

// Using a Matrix object
const matrix = new Matrix()
    .translate(100, 100)
    .rotate(Math.PI / 4);

graphics
    .setTransform(matrix)
    .rect(0, 0, 50, 50)
    .fill({ color: 0xff0000 });

// Using individual transform values
graphics
    .setTransform(
        2, 0,     // scale x by 2
        0, 1,     // no skew
        100, 100  // translate x,y by 100
    )
    .circle(0, 0, 25)
    .fill({ color: 0x00ff00 });

star()

> star(x, y, points, radius, innerRadius?, rotation?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1172

Draws a star shape centered at a specified location. This method allows for the creation of stars with a variable number of points, outer radius, optional inner radius, and rotation.

The star is drawn as a closed polygon with alternating outer and inner vertices to create the star's points. An optional transformation can be applied to scale, rotate, or translate the star as needed.

Parameters

x

number

The x-coordinate of the center of the star

y

number

The y-coordinate of the center of the star

points

number

The number of points on the star (must be >= 3)

radius

number

The outer radius of the star (distance from center to point tips)

innerRadius?

number

Optional. The inner radius of the star (distance from center to inner vertices). If not specified, defaults to half of the outer radius

rotation?

number

Optional. The rotation of the star in radians. Default is 0, which aligns one point straight up

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();

// Draw a basic 5-pointed star
graphics
    .star(100, 100, 5, 50)
    .fill({ color: 0xff0000 });

// Star with custom inner radius
graphics
    .star(250, 100, 6, 50, 20)
    .fill({ color: 0x00ff00 })
    .stroke({ width: 2, color: 0x000000 });

See

Graphics#regularPoly For drawing regular polygons
Graphics#poly For drawing custom polygons
Graphics#path For creating custom shapes

stroke()

> stroke(...args): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:406

Strokes the current path with the current stroke style or specified style. Outlines the shape using the stroke settings.

Parameters

args

...[StrokeInput]

Optional stroke style to apply. Can be:

A stroke style object with width, color, etc.
A gradient
A pattern If omitted, uses current stroke style.

Returns

this

The Graphics instance for chaining

Example

const graphics = new Graphics();

// Stroke with direct color
graphics
    .circle(50, 50, 25)
    .stroke({
        width: 2,
        color: 0xff0000
    }); // 2px red stroke

// Fill with texture
graphics
   .rect(0, 0, 100, 100)
   .stroke(myTexture); // Fill with texture

// Stroke with gradient
const gradient = new FillGradient({
    end: { x: 1, y: 0 },
    colorStops: [
        { offset: 0, color: 0xff0000 },
        { offset: 0.5, color: 0x00ff00 },
        { offset: 1, color: 0x0000ff },
    ],
});

graphics
    .rect(0, 0, 100, 100)
    .stroke({
        width: 4,
        fill: gradient,
        alignment: 0.5,
        join: 'round'
    });

See

StrokeStyle For stroke style options
FillGradient For gradient strokes
setStrokeStyle For setting default stroke style

svg()

> svg(svg): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1194

Parses and renders an SVG string into the graphics context. This allows for complex shapes and paths defined in SVG format to be drawn within the graphics context.

Parameters

svg

string

The SVG string to be parsed and rendered

Returns

this

The Graphics instance for method chaining

Example

const graphics = new Graphics();
graphics
    .svg(`
        <path d="M 50,50 L 100,50 L 100,100 L 50,100 Z"
              fill="blue" />
        <circle cx="150" cy="75" r="25"
              fill="green" />
    `)
    .stroke({ width: 2, color: 0x000000 });

See

Graphics#path For adding custom paths
Graphics#fill For filling shapes after SVG parsing
Graphics#stroke For stroking shapes after SVG parsing

swapChildren()

> swapChildren<U>(child, child2): void

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/childrenHelperMixin.d.ts:187

Swaps the position of 2 Containers within this container.

Type Parameters

U

U extends ContainerChild

Parameters

child

U

First container to swap

child2

U

Second container to swap

Returns

void

Example

// Basic swap
container.swapChildren(sprite1, sprite2);

// With error handling
try {
    container.swapChildren(sprite1, sprite2);
} catch (e) {
    console.warn('One or both children not found in container');
}

Remarks

Updates render groups
No effect if same child
Triggers container changes
Common in z-ordering

Throws

If either child is not in container

See

Container#setChildIndex For direct index placement
Container#getChildIndex For getting current positions

Inherited from

texture()

Call Signature

> texture(texture): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:444

Adds a texture to the graphics context. This method supports multiple ways to draw textures including basic textures, tinted textures, and textures with custom dimensions.

Parameters

texture

Texture

The Texture object to use.

Returns

this

The instance of the current Graphics for chaining.

Extended texture drawing:

Example

const graphics = new Graphics();

// Basic texture drawing
graphics.texture(myTexture);

// Tinted texture with position
graphics.texture(myTexture, 0xff0000); // Red tint

// Texture with custom position and dimensions
graphics
    .texture(
        myTexture,    // texture
        0xffffff,     // white tint
        100, 100,     // position
        200, 150      // dimensions
    );

Basic texture drawing:

See

Texture For texture creation
FillPattern For pattern fills

Call Signature

> texture(texture, tint?, dx?, dy?, dw?, dh?): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:445

Adds a texture to the graphics context. This method supports multiple ways to draw textures including basic textures, tinted textures, and textures with custom dimensions.

Parameters

texture

Texture

The Texture object to use.

tint?

dx?

number

dy?

number

dw?

number

dh?

number

Returns

this

The instance of the current Graphics for chaining.

Extended texture drawing:

Example

const graphics = new Graphics();

// Basic texture drawing
graphics.texture(myTexture);

// Tinted texture with position
graphics.texture(myTexture, 0xff0000); // Red tint

// Texture with custom position and dimensions
graphics
    .texture(
        myTexture,    // texture
        0xffffff,     // white tint
        100, 100,     // position
        200, 150      // dimensions
    );

Basic texture drawing:

See

Texture For texture creation
FillPattern For pattern fills

toGlobal()

> toGlobal<P>(position, point?, skipUpdate?): P

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:64

Calculates the global position of a point relative to this container. Takes into account the container hierarchy and transforms.

Type Parameters

P

P extends PointData = Point

Parameters

position

ViewContainer.toGlobal

The local point to convert

point?

P

Optional point to store the result

skipUpdate?

boolean

Whether to skip transform updates

Returns

P

The global position

Example

// Basic point conversion
const localPoint = { x: 10, y: 20 };
const globalPoint = container.toGlobal(localPoint);

// With point reuse
const reusePoint = new Point();
container.toGlobal(localPoint, reusePoint);

// Performance optimization
const fastPoint = container.toGlobal(
    { x: 50, y: 50 },
    undefined,
    true // Skip transform update
);

See

Container#toLocal For reverse conversion
Container#getGlobalPosition For container position

Inherited from

toLocal()

> toLocal<P>(position, from?, point?, skipUpdate?): P

Defined in: node_modules/pixi.js/lib/scene/container/container-mixins/toLocalGlobalMixin.d.ts:100

Calculates the local position of the container relative to another point. Converts coordinates from any coordinate space to this container's local coordinate space.

Type Parameters

P

P extends PointData = Point

Parameters

position

Container<ContainerChild>

The world origin to calculate from

from?

The Container to calculate the global position from

point?

P

A Point object in which to store the value

skipUpdate?

boolean

Should we skip the update transform

Returns

P

A point object representing the position in local space

Example

// Basic coordinate conversion
const worldPoint = { x: 100, y: 100 };
const localPos = container.toLocal(worldPoint);

// Convert from another container
const fromSprite = new Sprite(texture);
fromSprite.position.set(50, 50);
const pointInSprite = { x: 10, y: 10 };
const localPoint = container.toLocal(pointInSprite, fromSprite);

// With point reuse for performance
const reusePoint = new Point();
container.toLocal(worldPoint, undefined, reusePoint);

// Skip transform update for static objects
const fastLocal = container.toLocal(
    worldPoint,
    undefined,
    undefined,
    true
);

See

Container#toGlobal For reverse conversion
Container#getGlobalPosition For container position

Inherited from

ViewContainer.toLocal

transform()

Call Signature

> transform(transform): this

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/Graphics.d.ts:1435

Applies a transformation matrix to the current graphics context by multiplying the current matrix with the specified matrix. This allows for complex transformations combining multiple operations.

Parameters

transform