PixiJS API Documentation

Class: Graphics

Graphics

The Graphics class is primarily used to render primitive shapes such as lines, circles and rectangles to the display, and to color and fill them. However, you can also use a Graphics object to build a list of primitives to use as a mask, or as a complex hitArea.

new Graphics (options)

ts:51

Name	Type	Attributes	Description
`options`	GraphicsOptions \| GraphicsContext	<optional>	Options for the Graphics.

Extends

Container

Implements

Instruction

Members

bounds Bounds

The local bounds of the graphic.

fillStyle ConvertedFillStyle

The fill style to use.

strokeStyle ConvertedStrokeStyle

The stroke style to use.

Methods

arc (…x, y, radius, startAngle, endAngle, counterclockwise) this

ts:255

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

Name	Type	Description
`x`	Parameters<GraphicsContext["arc"]>	The x-coordinate of the arc's center.
`y`		The y-coordinate of the arc's center.
`radius`		The arc's radius.
`startAngle`		The starting angle, in radians.
`endAngle`		The ending angle, in radians.
`counterclockwise`		(Optional) Specifies whether the arc is drawn counterclockwise (true) or clockwise (false). Defaults to false.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

arcTo (…x1, y1, x2, y2, radius) this

ts:272

Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line if necessary.

Name	Type	Description
`x1`	Parameters<GraphicsContext["arcTo"]>	The x-coordinate of the first control point.
`y1`		The y-coordinate of the first control point.
`x2`		The x-coordinate of the second control point.
`y2`		The y-coordinate of the second control point.
`radius`		The arc's radius.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

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

ts:287

Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec.

Name	Type	Description
`rx`	Parameters<GraphicsContext["arcToSvg"]>	The x-radius of the ellipse.
`ry`		The y-radius of the ellipse.
`xAxisRotation`		The rotation of the ellipse's x-axis relative to the x-axis of the coordinate system, in degrees.
`largeArcFlag`		Determines if the arc should be greater than or less than 180 degrees.
`sweepFlag`		Determines if the arc should be swept in a positive angle direction.
`x`		The x-coordinate of the arc's end point.
`y`		The y-coordinate of the arc's end point.

Returns:

Type	Description
this	The instance of the current object for chaining.

beginFill (color, alpha) Deprecated`` : since 8.0.0 Use Graphics#fill instead

ts:741

Name	Type	Attributes	Description
`color`	ColorSource
`alpha`	number	<optional>

beginPath () this

ts:237

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:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

bezierCurveTo (…cp1x, cp1y, cp2x, cp2y, x, y, smoothness) this

ts:306

Adds a cubic Bezier curve to the path. It requires three points: the first two are control points and the third one is the end point. The starting point is the last point in the current path.

Name	Type	Description
`cp1x`	Parameters<GraphicsContext["bezierCurveTo"]>	The x-coordinate of the first control point.
`cp1y`		The y-coordinate of the first control point.
`cp2x`		The x-coordinate of the second control point.
`cp2y`		The y-coordinate of the second control point.
`x`		The x-coordinate of the end point.
`y`		The y-coordinate of the end point.
`smoothness`		Optional parameter to adjust the smoothness of the curve.

Returns:

Type	Description
this	The instance of the current object for chaining.

chamferRect (…x, y, width, height, chamfer, transform) this

ts:514

Draw Rectangle with chamfer corners. These are angled corners.

Name	Type	Description
`x`	Parameters<GraphicsContext["chamferRect"]>	Upper left corner of rect
`y`		Upper right corner of rect
`width`		Width of rect
`height`		Height of rect
`chamfer`		non-zero real number, size of corner cutout
`transform`

Returns:

Type	Description
this

circle (…x, y, radius) this

ts:349

Draws a circle shape. This method adds a new circle path to the current drawing.

Name	Type	Description
`x`	Parameters<GraphicsContext["circle"]>	The x-coordinate of the center of the circle.
`y`		The y-coordinate of the center of the circle.
`radius`		The radius of the circle.

Returns:

Type	Description
this	The instance of the current object for chaining.

clear () this

ts:660

Clears all drawing commands from the graphics context, effectively resetting it. This includes clearing the path, and optionally resetting transformations to the identity matrix.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

clone (deep) Graphics

ts:694

Creates a new Graphics object. Note that only the context of the object is cloned, not its transform (position,scale,etc)

Name	Type	Default	Description
`deep`	boolean	false	Whether to create a deep clone of the graphics object. If false, the context will be shared between the two objects (default false). If true, the context will be cloned (recommended if you need to modify the context in any way).

Returns:

Type	Description
Graphics	A clone of the graphics object

closePath () this

ts:326

Closes the current path by drawing a straight line back to the start. If the shape is already closed or there are no points in the path, this method does nothing.

Returns:

Type	Description
this	The instance of the current object for chaining.

containsPoint (point)

ts:117

Checks if the object contains the given point.

Name	Type	Description
`point`	PointData	The point to check

cut () this

ts:246

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:

Type	Description
this

destroy (options) void overrides

ts:126

Destroys this graphics renderable and optionally its context.

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

Name	Type	Attributes	Default	Description
`options`	DestroyOptions	<optional>		Options parameter. A boolean will act as if all options
`options.texture`	boolean	<optional>	false	Should destroy the texture of the graphics context
`options.textureSource`	boolean	<optional>	false	Should destroy the texture source of the graphics context
`options.context`	boolean	<optional>	false	Should destroy the context

drawCircle (…args) this Deprecated`` : since 8.0.0 Use Graphics#circle instead

ts:787

Name	Type	Description
`args`	any

Returns:

Type	Description
this

drawEllipse (…args) this Deprecated`` : since 8.0.0 Use Graphics#ellipse instead

ts:800

Name	Type	Description
`args`	any

Returns:

Type	Description
this

drawPolygon (…args) this Deprecated`` : since 8.0.0 Use Graphics#poly instead

ts:813

Name	Type	Description
`args`	any

Returns:

Type	Description
this

drawRect (…args) this Deprecated`` : since 8.0.0 Use Graphics#rect instead

ts:826

Name	Type	Description
`args`	any

Returns:

Type	Description
this

drawRoundedRect (…args) this Deprecated`` : since 8.0.0 Use Graphics#roundRect instead

ts:839

Name	Type	Description
`args`	any

Returns:

Type	Description
this

drawStar (…args) this Deprecated`` : since 8.0.0 Use Graphics#star instead

ts:852

Name	Type	Description
`args`	any

Returns:

Type	Description
this

ellipse (…x, y, radiusX, radiusY) this

ts:335

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.

Name	Type	Description
`x`	Parameters<GraphicsContext["ellipse"]>	The x-coordinate of the center of the ellipse.
`y`		The y-coordinate of the center of the ellipse.
`radiusX`		The horizontal radius of the ellipse.
`radiusY`		The vertical radius of the ellipse.

Returns:

Type	Description
this	The instance of the current object for chaining.

endFill () Deprecated`` : since 8.0.0 Use Graphics#fill instead

ts:764

fill (…style) this

ts:190

Fills the current or given path with the current fill style. This method can optionally take a color and alpha for a simple fill, or a more complex FillStyle object for advanced fills.

Name	Type	Description
`style`	FillInput	(Optional) The style to fill the path with. Can be a color, gradient, pattern, or a complex style object. If omitted, uses the current fill style.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

fill (color, alpha) this Deprecated`` : 8.0.0

ts:198

Name	Type	Attributes	Description
`color`	ColorSource
`alpha`	number	<optional>

Returns:

Type	Description
this

filletRect (…x, y, width, height, fillet) this

ts:500

Draw Rectangle with fillet corners. This is much like rounded rectangle however it support negative numbers as well for the corner radius.

Name	Type	Description
`x`	Parameters<GraphicsContext["filletRect"]>	Upper left corner of rect
`y`		Upper right corner of rect
`width`		Width of rect
`height`		Height of rect
`fillet`		accept negative or positive values

Returns:

Type	Description
this

getTransform () Matrix

ts:573

Returns the current transformation matrix of the graphics context.

Returns:

Type	Description
Matrix	The current transformation matrix.

lineStyle (width, color, alpha) this Deprecated`` : since 8.0.0 Use Graphics#setStrokeStyle instead

ts:717

Name	Type	Attributes
`width`	number	<optional>
`color`	ColorSource	<optional>
`alpha`	number	<optional>

Returns:

Type	Description
this

lineTo (…x, y) this

ts:371

Connects the current point to a new point with a straight line. This method updates the current path.

Name	Type	Description
`x`	Parameters<GraphicsContext["lineTo"]>	The x-coordinate of the new point to connect to.
`y`		The y-coordinate of the new point to connect to.

Returns:

Type	Description
this	The instance of the current object for chaining.

moveTo (…x, y) this

ts:382

Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.

Name	Type	Description
`x`	Parameters<GraphicsContext["moveTo"]>	The x-coordinate for the starting point.
`y`		The y-coordinate for the starting point.

Returns:

Type	Description
this	The instance of the current object for chaining.

path (…path) this

ts:361

Adds another GraphicsPath to this path, optionally applying a transformation.

Name	Type	Description
`path`	Parameters<GraphicsContext["path"]>	The `GraphicsPath` to add.

Returns:

Type	Description
this	The instance of the current object for chaining.

poly (…points, close) this

ts:437

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.

Name	Type	Description
`points`	Parameters<GraphicsContext["poly"]>	An array of numbers, or an array of PointData objects eg [{x,y}, {x,y}, {x,y}] representing the x and y coordinates, of the polygon's vertices, in sequence.
`close`		A boolean indicating whether to close the polygon path. True by default.

Returns:

Type	Description
this	The instance of the current object for chaining further drawing commands.

quadraticCurveTo (…cpx, cpy, x, y, smoothness) this

ts:393

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.

Name	Type	Description
`cpx`	Parameters<GraphicsContext["quadraticCurveTo"]>	The x-coordinate of the control point.
`cpy`		The y-coordinate of the control point.
`x`		The x-coordinate of the end point.
`y`		The y-coordinate of the end point.
`smoothness`		Optional parameter to adjust the smoothness of the curve.

Returns:

Type	Description
this	The instance of the current object for chaining.

rect (…x, y, w, h) this

ts:408

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

Name	Type	Description
`x`	Parameters<GraphicsContext["rect"]>	The x-coordinate of the top-left corner of the rectangle.
`y`		The y-coordinate of the top-left corner of the rectangle.
`w`		The width of the rectangle.
`h`		The height of the rectangle.

Returns:

Type	Description
this	The instance of the current object for chaining.

regularPoly (…x, y, radius, sides, rotation, transform) this

ts:451

Draws a regular polygon with a specified number of sides. All sides and angles are equal.

Name	Type	Description
`x`	Parameters<GraphicsContext["regularPoly"]>	The x-coordinate of the center of the polygon.
`y`		The y-coordinate of the center of the polygon.
`radius`		The radius of the circumscribed circle of the polygon.
`sides`		The number of sides of the polygon. Must be 3 or more.
`rotation`		The rotation angle of the polygon, in radians. Zero by default.
`transform`		An optional `Matrix` object to apply a transformation to the polygon.

Returns:

Type	Description
this	The instance of the current object for chaining.

resetTransform () this

ts:581

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

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

restore (…args) this

ts:559

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

Name	Type	Description
`args`	Parameters<GraphicsContext["restore"]>

Returns:

Type	Description
this

rotateTransform (…angle) this

ts:590

Applies a rotation transformation to the graphics context around the current origin.

Name	Type	Description
`angle`	Parameters<GraphicsContext["rotate"]>	The angle of rotation in radians.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

roundPoly (…x, y, radius, sides, corner, rotation) this

ts:466

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

Name	Type	Description
`x`	Parameters<GraphicsContext["roundPoly"]>	The x-coordinate of the center of the polygon.
`y`		The y-coordinate of the center of the polygon.
`radius`		The radius of the circumscribed circle of the polygon.
`sides`		The number of sides of the polygon. Must be 3 or more.
`corner`		The radius of the rounding of the corners.
`rotation`		The rotation angle of the polygon, in radians. Zero by default.

Returns:

Type	Description
this	The instance of the current object for chaining.

roundRect (…x, y, w, h, radius) this

ts:421

Draws a rectangle with rounded corners. The corner radius can be specified to determine how rounded the corners should be. An optional transformation can be applied, which allows for rotation, scaling, and translation of the rectangle.

Name	Type	Description
`x`	Parameters<GraphicsContext["roundRect"]>	The x-coordinate of the top-left corner of the rectangle.
`y`		The y-coordinate of the top-left corner of the rectangle.
`w`		The width of the rectangle.
`h`		The height of the rectangle.
`radius`		The radius of the rectangle's corners. If not specified, corners will be sharp.

Returns:

Type	Description
this	The instance of the current object for chaining.

roundShape (…points, radius, useQuadratic, smoothness) this

ts:482

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.

Name	Type	Description
`points`	Parameters<GraphicsContext["roundShape"]>	An array of `RoundedPoint` representing the corners of the shape to draw. A minimum of 3 points is required.
`radius`		The default radius for the corners. This radius is applied to all corners unless overridden in `points`.
`useQuadratic`		If set to true, rounded corners are drawn using a quadraticCurve method instead of an arc method. Defaults to false.
`smoothness`		Specifies the smoothness of the curve when `useQuadratic` is true. Higher values make the curve smoother.

Returns:

Type	Description
this	The instance of the current object for chaining.

save () this

ts:568

Saves the current graphics state, including transformations, fill styles, and stroke styles, onto a stack.

Returns:

Type	Description
this

scaleTransform (…x, y) this

ts:600

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

Name	Type	Description
`x`	Parameters<GraphicsContext["scale"]>	The scale factor in the horizontal direction.
`y`		(Optional) The scale factor in the vertical direction. If not specified, the x value is used for both directions.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

setFillStyle (…args) this

ts:166

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

Name	Type	Description
`args`	FillInput	The fill style to apply. This can be a simple color, a gradient or pattern object, or a FillStyle or ConvertedFillStyle object.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

setStrokeStyle (…args) this

ts:178

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

Name	Type	Description
`args`	StrokeInput	The stroke style to apply. Can be defined as a color, a gradient or pattern, or a StrokeStyle or ConvertedStrokeStyle object.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

setTransform (…a, b, c, d, dx, dy) this

ts:612

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

Name	Type	Description
`a`	[Matrix] \| [number, number, number, number, number, number]	The value for the a property of the matrix, or a Matrix object to use directly.
`b`		The value for the b property of the matrix.
`c`		The value for the c property of the matrix.
`d`		The value for the d property of the matrix.
`dx`		The value for the tx (translate x) property of the matrix.
`dy`		The value for the ty (translate y) property of the matrix.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

star (…x, y, points, radius, innerRadius, rotation) this

ts:528

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.

Name	Type	Description
`x`	Parameters<GraphicsContext["star"]>	The x-coordinate of the center of the star.
`y`		The y-coordinate of the center of the star.
`points`		The number of points of the star.
`radius`		The outer radius of the star (distance from the center to the outer points).
`innerRadius`		Optional. The inner radius of the star (distance from the center to the inner points between the outer points). If not provided, defaults to half of the `radius`.
`rotation`		Optional. The rotation of the star in radians, where 0 is aligned with the y-axis. Defaults to 0, meaning one point is directly upward.

Returns:

Type	Description
this	The instance of the current object for chaining further drawing commands.

stroke (…args) this

ts:204

Strokes the current path with the current stroke style. This method can take an optional FillStyle parameter to define the stroke's appearance, including its color, width, and other properties.

Name	Type	Description
`args`	FillStyle	(Optional) The stroke style to apply. Can be defined as a simple color or a more complex style object. If omitted, uses the current stroke style.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

svg (…svg) this

ts:549

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.

Name	Type	Description
`svg`	Parameters<GraphicsContext["svg"]>	The SVG string to be parsed and rendered.

Returns:

Type	Description
this

texture (…texture, tint, dx, dy, dw, dh) this

ts:215

Adds a texture to the graphics context. This method supports multiple overloads for specifying the texture, tint, and dimensions. If only a texture is provided, it uses the texture's width and height for drawing. Additional parameters allow for specifying a tint color, and custom dimensions for the texture drawing area.

Name	Type	Description
`texture`	[Texture, unknown, unknown, unknown, unknown, unknown]	The Texture object to use.
`tint`		(Optional) A ColorSource to tint the texture. If not provided, defaults to white (0xFFFFFF).
`dx`		(Optional) The x-coordinate in the destination canvas at which to place the top-left corner of the source image.
`dy`		(Optional) The y-coordinate in the destination canvas at which to place the top-left corner of the source image.
`dw`		(Optional) The width of the rectangle within the source image to draw onto the destination canvas. If not provided, uses the texture's frame width.
`dh`		(Optional) The height of the rectangle within the source image to draw onto the destination canvas. If not provided, uses the texture's frame height.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

transform (…a, b, c, d, dx, dy) this

ts:630

Applies the specified transformation matrix to the current graphics context by multiplying the current matrix with the specified matrix.

Name	Type	Description
`a`	[Matrix] \| [number, number, number, number, number, number]	The value for the a property of the matrix, or a Matrix object to use directly.
`b`		The value for the b property of the matrix.
`c`		The value for the c property of the matrix.
`d`		The value for the d property of the matrix.
`dx`		The value for the tx (translate x) property of the matrix.
`dy`		The value for the ty (translate y) property of the matrix.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

translateTransform (…x, y) this

ts:648

Applies a translation transformation to the graphics context, moving the origin by the specified amounts.

Name	Type	Description
`x`	Parameters<GraphicsContext["translate"]>	The amount to translate in the horizontal direction.
`y`		(Optional) The amount to translate in the vertical direction. If not specified, the x value is used for both directions.

Returns:

Type	Description
this	The instance of the current GraphicsContext for method chaining.

Inherited Properties

From class Container

accessible boolean inherited

Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set

Default Value:

false

accessibleChildren boolean inherited

Setting to false will prevent any children inside this container to be accessible. Defaults to true.

Default Value:

true

accessibleHint string inherited

Sets the aria-label attribute of the shadow div

Default Value:

undefined

accessiblePointerEvents PointerEvents inherited

Specify the pointer-events the accessible div will use Defaults to auto.

Default Value:

'auto'

accessibleText string inherited

Sets the text content of the shadow div

Default Value:

undefined

accessibleTitle string inherited

Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'

Default Value:

undefined

accessibleType string inherited

Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.

Default Value:

'button'

alpha number inherited

The opacity of the object.

angle number inherited

The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

blendMode BLEND_MODES inherited

The blend mode to be applied to the sprite. Apply a value of 'normal' to reset the blend mode.

Default Value:

'normal'

boundsArea Rectangle inherited

An optional bounds area for this container. Setting this rectangle will stop the renderer from recursively measuring the bounds of each children and instead use this single boundArea. This is great for optimisation! If for example you have a 1000 spinning particles and you know they all sit within a specific bounds, then setting it will mean the renderer will not need to measure the 1000 children to find the bounds. Instead it will just use the bounds you set.

cacheAsBitmap boolean Deprecated : Since PixiJS v8 inherited

Legacy property for backwards compatibility with PixiJS v7 and below. Use cacheAsTexture instead.

children C[] readonly inherited

The array of children of this container.

cullable boolean inherited

Should this object be rendered if the bounds of this object are out of frame?

Culling has no effect on whether updateTransform is called.

Default Value:

false

cullableChildren boolean inherited

Determines if the children to the container can be culled Setting this to false allows PixiJS to bypass a recursive culling function Which can help to optimize very complex scenes

Default Value:

true

cullArea Rectangle inherited

If set, this shape is used for culling instead of the bounds of this object. It can improve the culling performance of objects with many children. The culling area is defined in local space.

destroyed boolean inherited

If the object has been destroyed via destroy(). If true, it should not be used.

Default Value:

false

effects Array<Effect> inherited

TODO

Needs docs.

groupTransform Matrix readonly inherited

The group transform is a transform relative to the render group it belongs too. If this container is render group then this will be an identity matrix. other wise it will be the same as the relativeGroupTransform. Use this value when actually rendering things to the screen

height number inherited

The height of the Container, setting this will actually modify the scale to achieve the value set.

hitArea IHitArea inherited

Interaction shape. Children will be hit first, then this shape will be checked. Setting this will cause this shape to be checked in hit tests rather than the container's bounds.

Default Value:

undefined

Example

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

 const sprite = new Sprite(texture);
 sprite.interactive = true;
 sprite.hitArea = new Rectangle(0, 0, 100, 100);

interactiveChildren boolean inherited

Determines if the children to the container can be clicked/touched Setting this to false allows PixiJS to bypass a recursive hitTest function

Default Value:

true

isCachedAsTexture boolean readonly inherited

Whether this container is currently cached as a texture.

isRenderable boolean inherited

Whether or not the object should be rendered.

isRenderGroup boolean inherited

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

label string inherited

The instance label of the object.

Default Value:

undefined

localTransform Matrix readonly inherited

Current transform of the object based on local factors: position, scale, other stuff.

name string Deprecated : since 8.0.0 inherited

The instance name of the object.

See:

label

onclick inherited

Property-based event handler for the click event.

Default Value:

null

Example

this.onclick = (event) => {
 //some function here that happens on click
}

onglobalmousemove inherited

Property-based event handler for the globalmousemove event.

Default Value:

null

Example

this.onglobalmousemove = (event) => {
 //some function here that happens on globalmousemove
}

onglobalpointermove inherited

Property-based event handler for the globalpointermove event.

Default Value:

null

Example

this.onglobalpointermove = (event) => {
 //some function here that happens on globalpointermove
}

onglobaltouchmove inherited

Property-based event handler for the globaltouchmove event.

Default Value:

null

Example

this.onglobaltouchmove = (event) => {
 //some function here that happens on globaltouchmove
}

onmousedown inherited

Property-based event handler for the mousedown event.

Default Value:

null

Example

this.onmousedown = (event) => {
 //some function here that happens on mousedown
}

onmouseenter inherited

Property-based event handler for the mouseenter event.

Default Value:

null

Example

this.onmouseenter = (event) => {
 //some function here that happens on mouseenter
}

onmouseleave inherited

Property-based event handler for the mouseleave event.

Default Value:

null

Example

this.onmouseleave = (event) => {
 //some function here that happens on mouseleave
}

onmousemove inherited

Property-based event handler for the mousemove event.

Default Value:

null

Example

this.onmousemove = (event) => {
 //some function here that happens on mousemove
}

onmouseout inherited

Property-based event handler for the mouseout event.

Default Value:

null

Example

this.onmouseout = (event) => {
 //some function here that happens on mouseout
}

onmouseover inherited

Property-based event handler for the mouseover event.

Default Value:

null

Example

this.onmouseover = (event) => {
 //some function here that happens on mouseover
}

onmouseup inherited

Property-based event handler for the mouseup event.

Default Value:

null

Example

this.onmouseup = (event) => {
 //some function here that happens on mouseup
}

onmouseupoutside inherited

Property-based event handler for the mouseupoutside event.

Default Value:

null

Example

this.onmouseupoutside = (event) => {
 //some function here that happens on mouseupoutside
}

onpointercancel inherited

Property-based event handler for the pointercancel event.

Default Value:

null

Example

this.onpointercancel = (event) => {
 //some function here that happens on pointercancel
}

onpointerdown inherited

Property-based event handler for the pointerdown event.

Default Value:

null

Example

this.onpointerdown = (event) => {
 //some function here that happens on pointerdown
}

onpointerenter inherited

Property-based event handler for the pointerenter event.

Default Value:

null

Example

this.onpointerenter = (event) => {
 //some function here that happens on pointerenter
}

onpointerleave inherited

Property-based event handler for the pointerleave event.

Default Value:

null

Example

this.onpointerleave = (event) => {
 //some function here that happens on pointerleave
}

onpointermove inherited

Property-based event handler for the pointermove event.

Default Value:

null

Example

this.onpointermove = (event) => {
 //some function here that happens on pointermove
}

onpointerout inherited

Property-based event handler for the pointerout event.

Default Value:

null

Example

this.onpointerout = (event) => {
 //some function here that happens on pointerout
}

onpointerover inherited

Property-based event handler for the pointerover event.

Default Value:

null

Example

this.onpointerover = (event) => {
 //some function here that happens on pointerover
}

onpointertap inherited

Property-based event handler for the pointertap event.

Default Value:

null

Example

this.onpointertap = (event) => {
 //some function here that happens on pointertap
}

onpointerup inherited

Property-based event handler for the pointerup event.

Default Value:

null

Example

this.onpointerup = (event) => {
 //some function here that happens on pointerup
}

onpointerupoutside inherited

Property-based event handler for the pointerupoutside event.

Default Value:

null

Example

this.onpointerupoutside = (event) => {
 //some function here that happens on pointerupoutside
}

onrightclick inherited

Property-based event handler for the rightclick event.

Default Value:

null

Example

this.onrightclick = (event) => {
 //some function here that happens on rightclick
}

onrightdown inherited

Property-based event handler for the rightdown event.

Default Value:

null

Example

this.onrightdown = (event) => {
 //some function here that happens on rightdown
}

onrightup inherited

Property-based event handler for the rightup event.

Default Value:

null

Example

this.onrightup = (event) => {
 //some function here that happens on rightup
}

onrightupoutside inherited

Property-based event handler for the rightupoutside event.

Default Value:

null

Example

this.onrightupoutside = (event) => {
 //some function here that happens on rightupoutside
}

ontap inherited

Property-based event handler for the tap event.

Default Value:

null

Example

this.ontap = (event) => {
 //some function here that happens on tap
}

ontouchcancel inherited

Property-based event handler for the touchcancel event.

Default Value:

null

Example

this.ontouchcancel = (event) => {
 //some function here that happens on touchcancel
}

ontouchend inherited

Property-based event handler for the touchend event.

Default Value:

null

Example

this.ontouchend = (event) => {
 //some function here that happens on touchend
}

ontouchendoutside inherited

Property-based event handler for the touchendoutside event.

Default Value:

null

Example

this.ontouchendoutside = (event) => {
 //some function here that happens on touchendoutside
}

ontouchmove inherited

Property-based event handler for the touchmove event.

Default Value:

null

Example

this.ontouchmove = (event) => {
 //some function here that happens on touchmove
}

ontouchstart inherited

Property-based event handler for the touchstart event.

Default Value:

null

Example

this.ontouchstart = (event) => {
 //some function here that happens on touchstart
}

onwheel inherited

Property-based event handler for the wheel event.

Default Value:

null

Example

this.onwheel = (event) => {
 //some function here that happens on wheel
}

parent Container inherited

The display object container that contains this display object.

Default Value:

undefined

parentRenderLayer IRenderLayer readonly inherited

The RenderLayer this container belongs to, if any. If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.

pivot ObservablePoint inherited

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).

Since:

4.0.0

position ObservablePoint inherited

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

Since:

4.0.0

relativeGroupTransform Matrix readonly inherited

The relative group transform is a transform relative to the render group it belongs too. It will include all parent transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested). If this container is is self a render group matrix will be relative to its parent render group

renderable inherited

Can this object be rendered, if false the object will not be drawn but the transform will still be updated.

rotation number inherited

The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.

scale ObservablePoint inherited

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

The default scale is (1, 1).

Since:

4.0.0

skew ObservablePoint inherited

The skew factor for the object in radians.

Since:

4.0.0

sortableChildren boolean inherited

If set to true, the container will sort its children by zIndex value when the next render is called, or manually if sortChildren() is called.

This actually changes the order of elements in the array, so should be treated as a basic solution that is not performant compared to other solutions, such as PixiJS Layers

Also be aware of that this may not work nicely with the addChildAt() function, as the zIndex sorting may cause the child to automatically sorted to another position.

Default Value:

false

sortDirty boolean inherited

Should children be sorted by zIndex at the next render call.

Will get automatically set to true if a new child is added, or if a child's zIndex changes.

Default Value:

false

tabIndex number inherited

Default Value:

TODO

Needs docs.

tint number inherited

The tint applied to the sprite. This is a hex value.

A value of 0xFFFFFF will remove any tint effect.

Default Value:

0xFFFFFF

uid number readonly inherited

unique id for this container

updateCacheTexture () => void inherited

Updates the cached texture of this container. This will flag the container's cached texture to be redrawn on the next render.

visible inherited

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

width number inherited

The width of the Container, setting this will actually modify the scale to achieve the value set.

worldTransform readonly inherited

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

x number inherited

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

y number inherited

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

Inherited Methods

From class Container

_getGlobalBoundsRecursive (factorRenderLayers, bounds, currentLayer) void inherited

ts:31

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

Name	Type	Description
`factorRenderLayers`	boolean	A flag indicating whether to consider render layers in the calculation.
`bounds`	Bounds	The bounds object to update with the calculated values.
`currentLayer`	IRenderLayer	The current render layer being processed.

addChild (…children) Container inherited

ts:625

Adds one or more children to the container.

Multiple items can be added like so: myContainer.addChild(thingOne, thingTwo, thingThree)

Name	Type	Description
`children`	Container	The Container(s) to add to the container

Returns:

Type	Description
Container	The first child that was added.

addChildAt (child, index) Container inherited

ts:142

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.

Name	Type	Description
`child`	Container	The child to add.
`index`	number	The absolute index where the child will be positioned at the end of the operation.

Returns:

Type	Description
Container	The child that was added.

addEventListener (type, listener, options) inherited

ts:681

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

Name	Type	Attributes	Description
`type`	string		The type of event to listen to.
`listener`	EventListenerOrEventListenerObject		The listener callback or object.
`options`	AddListenerOptions	<optional>	Listener options, used for capture phase.

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

cacheAsTexture (val) void inherited

ts:13

Caches this container as a texture. This allows the container to be rendered as a single texture, which can improve performance for complex static containers.

Name	Type	Description
`val`	boolean \| CacheAsTextureOptions	If true, enables caching with default options. If false, disables caching. Can also pass options object to configure caching behavior.

collectRenderables (instructionSet, renderer, currentLayer) void inherited

ts:15

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.

Name	Type	Description
`instructionSet`	InstructionSet	The set of instructions to which the renderables will be added.
`renderer`	Renderer	The renderer responsible for rendering the scene.
`currentLayer`	IRenderLayer	The current render layer being processed.

collectRenderablesSimple (instructionSet, renderer, currentLayer) void inherited

ts:25

Collects renderables using a simple method, suitable for containers marked as simple. This method iterates over the container's children and adds their renderables to the instruction set.

Name	Type	Description
`instructionSet`	InstructionSet	The set of instructions to which the renderables will be added.
`renderer`	Renderer	The renderer responsible for rendering the scene.
`currentLayer`	IRenderLayer	The current render layer being processed.

collectRenderablesWithEffects (instructionSet, renderer, currentLayer) void inherited

ts:35

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.

Name	Type	Description
`instructionSet`	InstructionSet	The set of instructions to which the renderables will be added.
`renderer`	Renderer	The renderer responsible for rendering the scene.
`currentLayer`	IRenderLayer	The current render layer being processed.

disableRenderGroup () void inherited

ts:826

This will disable the render group for this container.

dispatchEvent (e) boolean inherited

ts:772

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.

Name	Type	Description
`e`	Event	The event to dispatch.

Returns:

Type	Description
boolean	Whether the preventDefault() method was not invoked.

Example

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

enableRenderGroup () void inherited

ts:802

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.

eventMode (value) inherited

ts:601

Enable interaction events for the Container. Touch, pointer and mouse. There are 5 types of interaction settings:

'none': Ignores all interaction events, even on its children.
'passive': (default) Does not emit events and ignores all hit testing on itself and non-interactive children. Interactive children will still emit events.
'auto': Does not emit events but is hit tested if parent is interactive. Same as interactive = false in v7
'static': Emit events and is hit tested. Same as interaction = true in v7
'dynamic': Emits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving

Name	Type	Description
`value`

Since:

7.2.0

Example

 import { Sprite } from 'pixi.js';

 const sprite = new Sprite(texture);
 sprite.eventMode = 'static';
 sprite.on('tap', (event) => {
     // Handle event
 });

filterArea () Rectangle inherited

ts:238

The area the filter is applied to. This is used as more of an optimization rather than figuring out the dimensions of the displayObject each frame you can set this rectangle.

Also works as an interaction mask.

Returns:

Type	Description
Rectangle

filters () readonly inherited

ts:191

Sets the filters for the displayObject. IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'.

Returns:

Type	Description
readonly

getBounds (skipUpdate, bounds) Bounds inherited

ts:111

Calculates and returns the (world) bounds of the display object as a Rectangle.

Name	Type	Attributes	Description
`skipUpdate`	boolean	<optional>	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`	Bounds	<optional>	Optional bounds to store the result of the bounds calculation.

Returns:

Type	Description
Bounds	The minimum axis-aligned rectangle in world space that fits around this object.

getChildAt (index) U inherited

ts:91

Returns the child at the specified index

Name	Type	Description
`index`	number	The index to get the child at

Returns:

Type	Description
U	The child at the given index, if any.

getChildByLabel (label, deep) Container inherited

ts:66

Returns the first child in the container with the specified label.

Recursive searches are done in a pre-order traversal.

Name	Type	Attributes	Default	Description
`label`	string \| RegExp			Instance label.
`deep`	boolean	<optional>	false	Whether to search recursively

Returns:

Type	Description
Container	The child with the specified label.

getChildByName (name, deep) Container Deprecated`` : since 8.0.0 inherited

ts:53

Name	Type	Attributes	Default	Description
`name`	string			Instance name.
`deep`	boolean	<optional>	false	Whether to search recursively

See:

getChildByLabel

Returns:

Type	Description
Container	The child with the specified name.

getChildIndex (child) number inherited

ts:124

Returns the index position of a child Container instance

Name	Type	Description
`child`	ContainerChild \| IRenderLayer	The Container instance to identify

Returns:

Type	Description
number	The index position of the child container to identify

getChildrenByLabel (label, deep, out) Array<Container> inherited

ts:103

Returns all children in the container with the specified label.

Name	Type	Attributes	Default	Description
`label`	string \| RegExp			Instance label.
`deep`	boolean	<optional>	false	Whether to search recursively
`out`	Array<Container>	<optional>	[]	The array to store matching children in.

Returns:

Type	Description
Array<Container>	An array of children with the specified label.

getFastGlobalBounds (factorRenderLayers, bounds) Bounds inherited

ts:17

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

Name	Type	Attributes	Description
`factorRenderLayers`	boolean	<optional>	A flag indicating whether to consider render layers in the calculation.
`bounds`	Bounds	<optional>	The output bounds object to store the result. If not provided, a new one is created.

Returns:

Type	Description
Bounds	The computed bounds.

getGlobalPosition (point, skipUpdate) Point inherited

ts:15

Returns the global position of the container.

Name	Type	Default	Description
`point`	Point		The optional point to write the global value to.
`skipUpdate`	boolean	false	Should we skip the update transform.

Returns:

Type	Description
Point	The updated point.

getLocalBounds () Bounds inherited

ts:73

Retrieves the local bounds of the container as a Bounds object.

Returns:

Type	Description
Bounds	The bounding area.

getSize (out) Size inherited

ts:1054

Retrieves the size of the container as a Size object. This is faster than get the width and height separately.

Name	Type	Attributes	Description
`out`	Size	<optional>	Optional object to store the size in.

Returns:

Type	Description
Size	The size of the container.

interactive (value) inherited

ts:585

Enable interaction events for the Container. Touch, pointer and mouse

Name	Type	Description
`value`	boolean

isCachedAsTexture () boolean inherited

ts:46

Is this container cached as a texture?

Returns:

Type	Description
boolean

isInteractive () boolean inherited

ts:631

Determines if the container is interactive or not

Since:

7.2.0

Returns:

Type	Description
boolean	Whether the container is interactive or not

Example

 import { Sprite } from 'pixi.js';

 const sprite = new Sprite(texture);
 sprite.eventMode = 'static';
 sprite.isInteractive(); // true

 sprite.eventMode = 'dynamic';
 sprite.isInteractive(); // true

 sprite.eventMode = 'none';
 sprite.isInteractive(); // false

 sprite.eventMode = 'passive';
 sprite.isInteractive(); // false

 sprite.eventMode = 'auto';
 sprite.isInteractive(); // false

mask () unknown inherited

ts:110

Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. In PixiJS a regular mask must be a Graphics or a {@link Sprite} object. This allows for much faster masking in canvas as it utilities shape clipping. Furthermore, a mask of an object must be in the subtree of its parent. Otherwise, getLocalBounds may calculate incorrect bounds, which makes the container's width and height wrong. To remove a mask, set this property to null.

For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.

Returns:

Type	Description
unknown

Example

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

 const graphics = new Graphics();
 graphics.beginFill(0xFF3300);
 graphics.drawRect(50, 250, 100, 100);
 graphics.endFill();

 const sprite = new Sprite(texture);
 sprite.mask = graphics;

onRender () (renderer: Renderer) => void inherited

ts:16

This callback is used when the container is rendered. This is where you should add your custom logic that is needed to be run every frame.

In v7 many users used updateTransform for this, however the way v8 renders objects is different and "updateTransform" is no longer called every frame

Returns:

Type	Description
(renderer: Renderer) => void

Example

const container = new Container();
container.onRender = () => {
   container.rotation += 0.01;
};

removeChild (…children) Container inherited

ts:704

Removes one or more children from the container.

Name	Type	Description
`children`	Container	The Container(s) to remove

Returns:

Type	Description
Container	The first child that was removed.

removeChildAt (index) U inherited

ts:78

Removes a child from the specified index position.

Name	Type	Description
`index`	number	The index to get the child from

Returns:

Type	Description
U	The child that was removed.

removeChildren (beginIndex, endIndex) ContainerChild[] inherited

ts:29

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

Name	Type	Attributes	Default	Description
`beginIndex`	number		0	The beginning position.
`endIndex`	number	<optional>		The ending position. Default value is size of the container.

Returns:

Type	Description
ContainerChild[]	List of removed children

removeEventListener (type, listener, options) inherited

ts:748

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

Name	Type	Attributes	Description
`type`	string		The type of event the listener is bound to.
`listener`	EventListenerOrEventListenerObject		The listener callback or object.
`options`	RemoveListenerOptions	<optional>	The original listener options. This is required to deregister a capture phase listener.

removeFromParent () inherited

ts:240

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

reparentChild (…child) U[0] inherited

ts:249

Reparent the child to this container, keeping the same worldTransform.

Name	Type	Description
`child`	U	The child to reparent

Returns:

Type	Description
U[0]	The first child that was reparented.

reparentChildAt (child, index) U inherited

ts:267

Reparent the child to this container at the specified index, keeping the same worldTransform.

Name	Type	Description
`child`	U	The child to reparent
`index`	number	The index to reparent the child to

Returns:

Type	Description
U

setChildIndex (child, index) void inherited

ts:107

Changes the position of an existing child in the container

Name	Type	Description
`child`	ContainerChild \| IRenderLayer	The child Container instance for which you want to change the index number
`index`	number	The resulting index number for the child container

setFromMatrix (matrix) void inherited

ts:1149

Updates the local transform using the given matrix.

Name	Type	Description
`matrix`	Matrix	The matrix to use for updating the transform.

setMask (options) inherited

ts:132

Used to set mask and control mask options.

Name	Type	Description
`options`	Partial<MaskOptionsAndMask>

Example

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

 const graphics = new Graphics();
 graphics.beginFill(0xFF3300);
 graphics.drawRect(50, 250, 100, 100);
 graphics.endFill();

 const sprite = new Sprite(texture);
 sprite.setMask({
     mask: graphics,
     inverse: true,
 });

setSize (value, height) inherited

ts:1076

Sets the size of the container to the specified width and height. This is faster than setting the width and height separately.

Name	Type	Attributes	Description
`value`	number \| Optional<Size, "height">		This can be either a number or a Size object.
`height`	number	<optional>	The height to set. Defaults to the value of `width` if not provided.

swapChildren (child, child2) void inherited

ts:212

Swaps the position of 2 Containers within this container.

Name	Type	Description
`child`	U	First container to swap
`child2`	U	Second container to swap

toGlobal (position, point, skipUpdate) P inherited

ts:37

Calculates the global position of the container.

Name	Type	Attributes	Default	Description
`position`	PointData			The world origin to calculate from.
`point`	P	<optional>		A Point object in which to store the value, optional (otherwise will create a new Point).
`skipUpdate`	boolean		false	Should we skip the update transform.

Returns:

Type	Description
P	A point object representing the position of this object.

toLocal (position, from, point, skipUpdate) P inherited

ts:58

Calculates the local position of the container relative to another point.

Name	Type	Attributes	Description
`position`	PointData		The world origin to calculate from.
`from`	Container	<optional>	The Container to calculate the global position from.
`point`	P	<optional>	A Point object in which to store the value, optional (otherwise will create a new Point).
`skipUpdate`	boolean	<optional>	Should we skip the update transform

Returns:

Type	Description
P	A point object representing the position of this object

updateCacheTexture () void inherited

ts:70

Updates the cached texture. Will flag that this container's cached texture needs to be redrawn. This will happen on the next render.

updateLocalTransform () void inherited

ts:1158

Updates the local transform.

updateTransform (opts) this inherited

ts:1113

Updates the transform properties of the container (accepts partial values).

Name	Type	Description
`opts`	object	The options for updating the transform.
`opts.x`	number	The x position of the container.
`opts.y`	number	The y position of the container.
`opts.scaleX`	number	The scale factor on the x-axis.
`opts.scaleY`	number	The scale factor on the y-axis.
`opts.rotation`	number	The rotation of the container, in radians.
`opts.skewX`	number	The skew factor on the x-axis.
`opts.skewY`	number	The skew factor on the y-axis.
`opts.pivotX`	number	The x coordinate of the pivot point.
`opts.pivotY`	number	The y coordinate of the pivot point.

Returns:

Type	Description
this

zIndex (value) inherited

ts:42

The zIndex of the container.

Setting this value, will automatically set the parent to be sortable. Children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.

Name	Type	Description
`value`	number

See:

sortableChildren

Inherited Events

From class Container

click inherited

ts:120

Fired when a pointer device button (usually a mouse left-button) is pressed and released on the container. Container's eventMode property must be set to static or 'dynamic' to fire event.

A click event fires after the pointerdown and pointerup events, in that order. If the mouse is moved over another Container after the pointerdown event, the click event is fired on the most specific common ancestor of the two target Containers.

The detail property of the event is the number of clicks that occurred within a 200ms window of each other upto the current click. For example, it will be 2 for a double click.