PixiJS API Documentation

Class: GraphicsContext

GraphicsContext

The GraphicsContext class allows for the creation of lightweight objects that contain instructions for drawing shapes and paths. It is used internally by the Graphics class to draw shapes and paths, and can be used directly and shared between Graphics objects,

This sharing of a GraphicsContext means that the intensive task of converting graphics instructions into GPU-ready geometry is done once, and the results are reused, much like sprites reusing textures.

new GraphicsContext ()

Members

defaultFillStyle ConvertedFillStyle static

The default fill style to use when none is provided.

Properties:

Name	Type	Default	Description
`alpha`	number	`1`	The alpha value to use for the fill.
`color`	number	`16777215`	The color to use for the fill.
`fill`		`undefined`	The fill pattern to use.
`matrix`		`undefined`	The matrix to apply.
`texture`			The texture to use for the fill.

defaultStrokeStyle ConvertedStrokeStyle static

The default stroke style to use when none is provided.

Properties:

Name	Type	Default	Description
`alignment`	number	`0.5`	The alignment of the stroke.
`alpha`	number	`1`	The alpha value to use for the stroke.
`cap`	string	`"butt"`	The line cap style to use.
`color`	number	`16777215`	The color to use for the stroke.
`fill`		`undefined`	The fill pattern to use.
`join`	string	`"miter"`	The line join style to use.
`matrix`		`undefined`	The matrix to apply.
`miterLimit`	number	`10`	The miter limit to use.
`pixelLine`	boolean	`false`	If the stroke is a pixel line.
`texture`			The texture to use for the fill.
`width`	number	`1`	The width of the stroke.

bounds Bounds

The bounds of the graphic shape.

fillStyle ConvertedFillStyle

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

strokeStyle ConvertedStrokeStyle

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.

uid number readonly

unique id for this graphics context

Methods

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

ts:402

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	Attributes	Description
`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.
`startAngle`	number		The starting angle, in radians.
`endAngle`	number		The ending angle, in radians.
`counterclockwise`	boolean	<optional>	(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:431

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`	number	The x-coordinate of the first control point.
`y1`	number	The y-coordinate of the first control point.
`x2`	number	The x-coordinate of the second control point.
`y2`	number	The y-coordinate of the second control point.
`radius`	number	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:458

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

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

Returns:

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

beginPath () this

ts:246

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:494

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	Attributes	Description
`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>	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:797

Draw Rectangle with chamfer corners. These are angled corners.

Name	Type	Attributes	Description
`x`	number		Upper left corner of rect
`y`	number		Upper right corner of rect
`width`	number		Width of rect
`height`	number		Height of rect
`chamfer`	number		non-zero real number, size of corner cutout
`transform`	Matrix	<optional>

Returns:

Type	Description
this

circle (x, y, radius) this

ts:559

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

Name	Type	Description
`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:

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

clear () this

ts:995

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 () GraphicsContext

ts:130

Creates a new GraphicsContext object that is a clone of this instance, copying all properties, including the current drawing state, transformations, styles, and instructions.

Returns:

Type	Description
GraphicsContext	A new GraphicsContext instance with the same properties and state as this one.

closePath () this

ts:527

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

ts:1069

Check to see if a point is contained within this geometry.

Name	Type	Description
`point`	PointData	Point to check if it's contained.

Returns:

Type	Description
boolean	`true` if the point is contained within geometry.

cut () this

ts:366

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	The instance of the current GraphicsContext for method chaining.

destroy (options) void

ts:1143

Destroys the GraphicsData object.

Name	Type	Attributes	Default	Description
`options`	TypeOrBool<TextureDestroyOptions>		false	Options parameter. A boolean will act as if all options have been set to that value
`options.texture`	boolean	<optional>	false	Should it destroy the current texture of the fill/stroke style?
`options.textureSource`	boolean	<optional>	false	Should it destroy the texture source of the fill/stroke style?

ellipse (x, y, radiusX, radiusY) this

ts:541

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`	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:

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

fill (style) this

ts:258

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 FillInput object for advanced fills.

Name	Type	Attributes	Description
`style`	FillInput	<optional>	(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:265

Name	Type	Description
`color`	ColorSource
`alpha`	number

Returns:

Type	Description
this

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

ts:780

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`	number	Upper left corner of rect
`y`	number	Upper right corner of rect
`width`	number	Width of rect
`height`	number	Height of rect
`fillet`	number	accept negative or positive values

Returns:

Type	Description
this

getTransform () Matrix

ts:883

Returns the current transformation matrix of the graphics context.

Returns:

Type	Description
Matrix	The current transformation matrix.

lineTo (x, y) this

ts:589

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

Name	Type	Description
`x`	number	The x-coordinate of the new point to connect to.
`y`	number	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:609

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

Name	Type	Description
`x`	number	The x-coordinate for the starting point.
`y`	number	The y-coordinate for the starting point.

Returns:

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

path (path) this

ts:575

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

Name	Type	Description
`path`	GraphicsPath	The `GraphicsPath` to add.

Returns:

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

poly (points, close) this

ts:705

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	Attributes	Description
`points`	number[] \| PointData[]		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`	boolean	<optional>	A boolean indicating whether to close the polygon path. True by default.

Returns:

Type	Description
this

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

ts:641

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	Attributes	Description
`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>	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:668

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

Name	Type	Description
`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:

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

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

ts:722

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

Name	Type	Attributes	Default	Description
`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		0	The rotation angle of the polygon, in radians. Zero by default.
`transform`	Matrix	<optional>		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:892

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 () this

ts:853

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:

Type	Description
this

rotate (angle) this

ts:903

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

Name	Type	Description
`angle`	number	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:740

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

Name	Type	Attributes	Description
`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 rounding of the corners.
`rotation`	number	<optional>	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:685

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	Attributes	Description
`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	<optional>	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:759

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	Attributes	Description
`points`	RoundedPoint[]		An array of `RoundedPoint` representing the corners of the shape to draw. A minimum of 3 points is required.
`radius`	number		The default radius for the corners. This radius is applied to all corners unless overridden in `points`.
`useQuadratic`	boolean	<optional>	If set to true, rounded corners are drawn using a quadraticCurve method instead of an arc method. Defaults to false.
`smoothness`	number	<optional>	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:871

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

Returns:

Type	Description
this

scale (x, y) this

ts:915

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

Name	Type	Description
`x`	number	The scale factor in the horizontal direction.
`y`	number	(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 (style) this

ts:178

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
`style`	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 (style) this

ts:192

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
`style`	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:928

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

Name	Type	Attributes	Description
`a`	number \| Matrix		The value for the a property of the matrix, or a Matrix object to use directly.
`b`	number	<optional>	The value for the b property of the matrix.
`c`	number	<optional>	The value for the c property of the matrix.
`d`	number	<optional>	The value for the d property of the matrix.
`dx`	number	<optional>	The value for the tx (translate x) property of the matrix.
`dy`	number	<optional>	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:814

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	Default	Description
`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 of the star.
`radius`	number		The outer radius of the star (distance from the center to the outer points).
`innerRadius`	number	0	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`	number	0	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 (style) this

ts:322

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

Name	Type	Attributes	Description
`style`	StrokeInput	<optional>	(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:839

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`	string	The SVG string to be parsed and rendered.

Returns:

Type	Description
this

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

ts:206

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	Attributes	Description
`texture`	Texture		The Texture object to use.
`tint`	ColorSource	<optional>	(Optional) A ColorSource to tint the texture. If not provided, defaults to white (0xFFFFFF).
`dx`	number	<optional>	(Optional) The x-coordinate in the destination canvas at which to place the top-left corner of the source image.
`dy`	number	<optional>	(Optional) The y-coordinate in the destination canvas at which to place the top-left corner of the source image.
`dw`	number	<optional>	(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`	number	<optional>	(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:955

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

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

Returns:

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

translate (x, y) this

ts:982

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

Name	Type	Description
`x`	number	The amount to translate in the horizontal direction.
`y`	number	(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.