PIXI.Graphics

class Graphics extends PIXI.Container

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.

Please note that due to legacy naming conventions, the behavior of some functions in this class can be confusing. Each call to drawRect(), drawPolygon(), etc. actually stores that primitive in the Geometry class's GraphicsGeometry object for later use in rendering or hit testing - the functions do not directly draw anything to the screen. Similarly, the clear() function doesn't change the screen, it simply resets the list of primitives, which can be useful if you want to rebuild the contents of an existing Graphics object.

Once a GraphicsGeometry list is built, you can re-use it in other Geometry objects as an optimization, by passing it into a new Geometry object's constructor. Because of this ability, it's important to call destroy() on Geometry objects once you are done with them, to properly dereference each GraphicsGeometry and prevent memory leaks.

Constructor

new PIXI.Graphics(geometry: PIXI.GraphicsGeometry) → {}

Parameters:
Name	Type	Default	Description
geometry	PIXI.GraphicsGeometry	undefined	Geometry to use, if omitted will create a new GraphicsGeometry instance.

Summary

Properties from Graphics

boolean	static nextRoundedRectBehavior = false
PIXI.BLEND_MODES	blendMode = PIXI.BLEND_MODES.NORMAL
boolean	cacheAsBitmap = false
PIXI.Polygon	currentPath = undefined
PIXI.FillStyle	fill
PIXI.GraphicsGeometry	geometry
PIXI.LineStyle	line
string	pluginName = "batch" Renderer plugin for batching
PIXI.Shader	shader = undefined
number	tint = 0xFFFFFF
PIXI.FillStyle	protected _fillStyle Current fill style.
boolean	protected _holeMode = false Current hole mode is enabled.
PIXI.LineStyle	protected _lineStyle Current line style.
PIXI.Matrix	protected _matrix = undefined Current shape transform matrix.
number	protected batchDirty = -1 Update dirty for limiting calculating batches.
Array<IGraphicsBatchElement>	protected batches A collections of batches! These can be drawn by the renderer batch system.
number	protected batchTint = -1 Update dirty for limiting calculating tints for batches.
Float32Array	protected vertexData = undefined Copy of the object vertex data.

Methods from Graphics

this	arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean)
this	arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) The arcTo() method creates an arc/curve between two tangents on the canvas.
this	beginFill(color: number, alpha: number)
this	beginHole()
PIXI.Graphics	beginTextureFill(options: IFillStyleOptions)
this	bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number)
this	clear()
PIXI.Graphics	clone()
this	closePath()
boolean	containsPoint(point: IPointData)
void	destroy(options: IDestroyOptions \| boolean)
PIXI.Graphics	drawChamferRect(this: PIXI.Graphics, x: number, y: number, width: number, height: number, chamfer: number) Draw Rectangle with chamfer corners. These are angled corners.
this	drawCircle(x: number, y: number, radius: number)
this	drawEllipse(x: number, y: number, width: number, height: number)
PIXI.Graphics	drawFilletRect(this: PIXI.Graphics, x: number, y: number, width: number, height: number, fillet: number)
this	drawPolygon(path: Array<number> \| Array<PIXI.IPointData> \| PIXI.Polygon)
this	drawRect(x: number, y: number, width: number, height: number)
PIXI.Graphics	drawRegularPolygon(this: PIXI.Graphics, x: number, y: number, radius: number, sides: number, rotation: number) Draw a regular polygon where all sides are the same length.
PIXI.Graphics	drawRoundedPolygon(this: PIXI.Graphics, x: number, y: number, radius: number, sides: number, corner: number, rotation: number) Draw a regular polygon with rounded corners.
this	drawRoundedRect(x: number, y: number, width: number, height: number, radius: number)
this	drawShape(shape: PIXI.Circle \| PIXI.Ellipse \| PIXI.Polygon \| PIXI.Rectangle \| PIXI.RoundedRectangle)
PIXI.Graphics	drawStar(this: PIXI.Graphics, x: number, y: number, points: number, radius: number, innerRadius: number, rotation: number) Draw a star shape with an arbitrary number of points.
PIXI.Graphics	drawTorus(this: PIXI.Graphics, x: number, y: number, innerRadius: number, outerRadius: number, startArc: number, endArc: number) Draw a torus shape, like a donut. Can be used for something like a circle loader.
this	endFill()
this	endHole()
PIXI.Texture	generateCanvasTexture(scaleMode: PIXI.SCALE_MODES, resolution: number)
boolean	isFastRect()
this	lineStyle(width: ILineStyleOptions \| number, color: number, alpha: number, alignment: number, native: boolean)
PIXI.Graphics	lineStyle(options: ILineStyleOptions)
PIXI.Graphics	lineTextureStyle(options: ILineStyleOptions)
this	lineTo(x: number, y: number)
this	moveTo(x: number, y: number)
this	quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number)
void	renderCanvas(renderer: PIXI.CanvasRenderer)
this	setMatrix(matrix: PIXI.Matrix)
void	protected _calculateBounds() Retrieves the bounds of the graphic shape as a rectangle object.
void	protected _initCurve(x: number, y: number)
void	protected _populateBatches() Populating batches for rendering.
void	protected _render(renderer: PIXI.Renderer)
void	protected _renderBatched(renderer: PIXI.Renderer)
void	protected _renderDirect(renderer: PIXI.Renderer)
void	protected _renderDrawCallDirect(renderer: PIXI.Renderer, drawCall: PIXI.BatchDrawCall)
PIXI.Shader	protected _resolveDirectShader(renderer: PIXI.Renderer)
void	protected calculateTints() Recalculate the tint by applying tint to batches using Graphics tint.
void	protected calculateVertices() If there's a transform update or a change to the shape of the geometry, recalculate the vertices.
void	protected finishPoly()
void	protected startPoly()

Properties inherited from Container

T[]	children
number	height The height of the Container, setting this will actually modify the scale to achieve the value set.
boolean	interactiveChildren = true
boolean	sortableChildren
boolean	sortDirty Should children be sorted by zIndex at the next updateTransform call.
number	width The width of the Container, setting this will actually modify the scale to achieve the value set.

Properties inherited from DisplayObject

boolean	_accessibleActive = false
boolean	_accessibleDiv = undefined
PIXI.Bounds	_bounds The bounds object, this is used to calculate and store the bounds of the displayObject.
PIXI.Bounds	_localBounds Local bounds object, swapped with `_bounds` when using `getLocalBounds()`.
boolean	accessible = false
boolean	accessibleChildren = true
string	accessibleHint = undefined
string	accessiblePointerEvents = 'auto'
?string	accessibleTitle = undefined
string	accessibleType = 'button'
number	alpha The opacity of the object.
number	angle
boolean	buttonMode
number	cacheAsBitmapMultisample = PIXI.MSAA_QUALITY.NONE
number	cacheAsBitmapResolution = null
boolean	cullable Should this object be rendered if the bounds of this object are out of frame?
PIXI.Rectangle	cullArea
string	cursor = undefined
boolean	destroyed Readonly flag for destroyed display objects.
PIXI.Rectangle	filterArea
PIXI.Filter[] \| null	filters
PIXI.IHitArea	hitArea = undefined
boolean	interactive = false
boolean	isMask Does any other displayObject use this object as a mask?
boolean	isSprite Used to fast check if a sprite is.. a sprite!
PIXI.Matrix	localTransform
PIXI.Container \| PIXI.MaskData \| null	mask
string	name = undefined
PIXI.Container	parent The display object container that contains this display object.
PIXI.ObservablePoint	pivot
PIXI.ObservablePoint	position
boolean	renderable
number	rotation
PIXI.ObservablePoint	scale The scale factors of this object along the local coordinate axes.
PIXI.ObservablePoint	skew
PIXI.DisplayObject	smartMask = undefined
PIXI.Transform	transform
boolean	visible
number	worldAlpha
PIXI.Matrix	worldTransform
boolean	worldVisible
number	x
number	y
number	zIndex The zIndex of the displayObject.
number	protected _boundsID Flags the cached bounds as dirty.
PIXI.Rectangle	protected _boundsRect Cache of this display-object's bounds-rectangle.
boolean	protected _destroyed If the object has been destroyed via destroy(). If true, it should not be used.
PIXI.Filter[]	protected _enabledFilters
number	protected _lastSortedIndex
PIXI.Rectangle	protected _localBoundsRect Cache of this display-object's local-bounds rectangle.
PIXI.Container \| PIXI.MaskData	protected _mask
PIXI.Container	protected _tempDisplayObjectParent
number	protected _zIndex

Methods inherited from Container

PIXI.DisplayObject	addChild(children: PIXI.DisplayObject) Adds one or more children to the container.
PIXI.DisplayObject	addChildAt(child: PIXI.DisplayObject, index: number)
void	calculateBounds() Recalculates the bounds of the container.
	containerUpdateTransform()
T	getChildAt(index: number)
PIXI.DisplayObject	getChildByName(name: string, deep: boolean) Returns the display object in the container.
number	getChildIndex(child: T)
PIXI.Rectangle	getLocalBounds(rect: PIXI.Rectangle, skipChildrenUpdate: boolean) Retrieves the local bounds of the displayObject as a rectangle object.
PIXI.DisplayObject	removeChild(children: PIXI.DisplayObject)
T	removeChildAt(index: number)
T[]	removeChildren(beginIndex: number, endIndex)
void	render(renderer: PIXI.Renderer) Renders the object using the WebGL renderer.
void	setChildIndex(child: T, index: number)
void	sortChildren() Sorts children by zIndex. Previous order is maintained for 2 children with the same zIndex.
void	swapChildren(child: T, child2: T)
void	updateTransform() Updates the transform on all children of this container for rendering.
void	protected _renderWithCulling(renderer: PIXI.Renderer)
void	protected onChildrenChange(_length: number)
void	protected renderAdvanced(renderer: PIXI.Renderer)

Methods inherited from DisplayObject

	addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
void	disableTempParent(cacheParent: PIXI.Container)
boolean	dispatchEvent(e: Event) Dispatch the event on this PIXI.DisplayObject using the event's PIXI.EventBoundary.
	displayObjectUpdateTransform()
PIXI.Container	enableTempParent() Used in Renderer, cacheAsBitmap and other places where you call an `updateTransform` on root
PIXI.Rectangle	getBounds(skipUpdate: boolean, rect: PIXI.Rectangle) Calculates and returns the (world) bounds of the display object as a Rectangle.
PIXI.Point	getGlobalPosition(point: PIXI.Point, skipUpdate: boolean)
	removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions)
PIXI.Container	setParent(container: PIXI.Container)
this	setTransform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number, pivotX: number, pivotY: number)
P	toGlobal(position: IPointData, point: P, skipUpdate: boolean)
P	toLocal(position: IPointData, from: PIXI.DisplayObject, point: P, skipUpdate: boolean)
PIXI.Rectangle	updateSmartMask(recursive: boolean, skipUpdate: boolean)
void	protected _recursivePostUpdateTransform() Recursively updates transform of all objects from the root to this one internal function for toLocal()

Inherited Events from Container

childAdded

Inherited Events from DisplayObject

	added
	childRemoved
	click
	clickcapture Capture phase equivalent of `click`.
	destroyed
	mousedown
	mousedowncapture Capture phase equivalent of `mousedown`.
	mouseenter Fired when the mouse pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	mouseentercapture Capture phase equivalent of `mouseenter`
	mouseleave Fired when the mouse pointer exits a DisplayObject and its descendants.
	mouseleavecapture Capture phase equivalent of `mouseleave`.
	mousemove
	mousemovecature Capture phase equivalent of `mousemove`.
	mouseout
	mouseoutcapture Capture phase equivalent of `mouseout`.
	mouseover
	mouseovercapture Capture phase equivalent of `mouseover`.
	mouseup
	mouseupcature Capture phase equivalent of `mouseup`.
	mouseupoutside
	mouseupoutsidecapture Capture phase equivalent of `mouseupoutside`.
	pointercancel
	pointercancelcapture Capture phase equivalent of `pointercancel`.
	pointerdown
	pointerdowncapture Capture phase equivalent of `pointerdown`.
	pointerenter Fired when the pointer is moved over a DisplayObject and its descendant's hit testing boundaries.
	pointerentercapture Capture phase equivalent of `pointerenter`
	pointerleave Fired when the pointer leaves the hit testing boundaries of a DisplayObject and its descendants.
	pointerleavecapture Capture phase equivalent of `pointerleave`.
	pointermove
	pointermovecapture Capture phase equivalent of `pointermove`.
	pointerout
	pointeroutcapture Capture phase equivalent of `pointerout`.
	pointerover
	pointerovercapture Capture phase equivalent of `pointerover`.
	pointertap
	pointertapcapture Capture phase equivalent of `pointertap`.
	pointerup
	pointerupcapture Capture phase equivalent of `pointerup`.
	pointerupoutside
	pointerupoutsidecapture Capture phase equivalent of `pointerupoutside`.
	removed
	rightclick
	rightclickcapture Capture phase equivalent of `rightclick`.
	rightdown
	rightdowncapture Capture phase equivalent of `rightdown`.
	rightup
	rightupcapture Capture phase equivalent of `rightup`.
	rightupoutside
	rightupoutsidecapture Capture phase equivalent of `rightupoutside`.
	tap
	tapcapture Capture phase equivalent of `tap`.
	touchcancel
	touchcancelcapture Capture phase equivalent of `touchcancel`.
	touchend
	touchendcapture Capture phase equivalent of `touchend`.
	touchendoutside
	touchendoutsidecapture Capture phase equivalent of `touchendoutside`.
	touchmove
	touchmovecapture Capture phase equivalent of `touchmove`.
	touchstart
	touchstartcapture Capture phase equivalent of `touchstart`.
PIXI.FederatedWheelEvent	wheel Fired when a the user scrolls with the mouse cursor over a DisplayObject.
PIXI.FederatedWheelEvent	wheelcapture Capture phase equivalent of `wheel`.

Public Properties

nextRoundedRectBehavior Graphics.ts:86

static nextRoundedRectBehavior: boolean = false

New rendering behavior for rounded rectangles: circular arcs instead of quadratic bezier curves. In the next major release, we'll enable this by default.

blendMode Graphics.ts:198

blendMode: PIXI.BLEND_MODES = PIXI.BLEND_MODES.NORMAL

The blend mode to be applied to the graphic shape. Apply a value of PIXI.BLEND_MODES.NORMAL to reset the blend mode. Note that, since each primitive in the GraphicsGeometry list is rendered sequentially, modes such as PIXI.BLEND_MODES.ADD and PIXI.BLEND_MODES.MULTIPLY will be applied per-primitive.

cacheAsBitmap Graphics.ts:167

cacheAsBitmap: boolean = false

When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite. This is useful if your graphics element does not change often, as it will speed up the rendering of the object in exchange for taking up texture memory. It is also useful if you need the graphics object to be anti-aliased, because it will be rendered using canvas. This is not recommended if you are constantly redrawing the graphics element.

currentPath Graphics.ts:107

currentPath: PIXI.Polygon = undefined

Current path

fill Graphics.ts:231

fill: PIXI.FillStyle

The current fill style.

geometry Graphics.ts:146

geometry: PIXI.GraphicsGeometry

Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU. Can be shared between multiple Mesh or Graphics objects.

line Graphics.ts:240

line: PIXI.LineStyle

The current line style.

pluginName Graphics.ts:104

pluginName: string = "batch"

Renderer plugin for batching

shader Graphics.ts:98

shader: PIXI.Shader = undefined

Represents the vertex and fragment shaders that processes the geometry and runs on the GPU. Can be shared between multiple Graphics objects.

tint Graphics.ts:216

tint: number = 0xFFFFFF

The tint applied to each graphic shape. This is a hex value. A value of 0xFFFFFF will remove any tint effect.

Protected Properties

_fillStyle Graphics.ts:125

protected _fillStyle: PIXI.FillStyle

Current fill style.

_holeMode Graphics.ts:134

protected _holeMode: boolean = false

Current hole mode is enabled.

_lineStyle Graphics.ts:128

protected _lineStyle: PIXI.LineStyle

Current line style.

_matrix Graphics.ts:131

protected _matrix: PIXI.Matrix = undefined

Current shape transform matrix.

batchDirty Graphics.ts:119

protected batchDirty: number = -1

Update dirty for limiting calculating batches.

batches Graphics.ts:113

protected batches: Array<IGraphicsBatchElement>

A collections of batches! These can be drawn by the renderer batch system.

batchTint Graphics.ts:116

protected batchTint: number = -1

Update dirty for limiting calculating tints for batches.

vertexData Graphics.ts:122

protected vertexData: Float32Array = undefined

Copy of the object vertex data.

Public Methods

arc Graphics.ts:530

arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean) → {this}

The arc method creates an arc/curve (used to create circles, or parts of circles).

Parameters:
Name	Type	Default	Description
cx	number		The x-coordinate of the center of the circle
cy	number		The y-coordinate of the center of the circle
radius	number		The radius of the circle
startAngle	number		The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
endAngle	number		The ending angle, in radians
anticlockwise	boolean	false	Specifies whether the drawing should be counter-clockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

arcTo Graphics.ts:501

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number) → {this}

The arcTo() method creates an arc/curve between two tangents on the canvas.

"borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!

Parameters:
Name	Type	Description
x1	number	The x-coordinate of the first tangent point of the arc
y1	number	The y-coordinate of the first tangent point of the arc
x2	number	The x-coordinate of the end of the arc
y2	number	The y-coordinate of the end of the arc
radius	number	The radius of the arc

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

beginFill Graphics.ts:602

beginFill(color: number, alpha: number) → {this}

Specifies a simple one-color fill that subsequent calls to other Graphics methods (such as lineTo() or drawCircle()) use when drawing.

Parameters:
Name	Type	Default	Description
color	number	0	the color of the fill
alpha	number	1	the alpha of the fill

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

beginHole Graphics.ts:1151

beginHole() → {this}

Begin adding holes to the last draw shape IMPORTANT: holes must be fully inside a shape to work Also weirdness ensues if holes overlap! Ellipses, Circles, Rectangles and Rounded Rectangles cannot be holes or host for holes in CanvasRenderer, please use moveTo lineTo, quadraticCurveTo if you rely on pixi-legacy bundle.

Returns:
Type	Description
this	Returns itself.

beginTextureFill Graphics.ts:614

beginTextureFill(options: IFillStyleOptions) → {PIXI.Graphics}

Begin the texture fill

Parameters:
Name	Type	Attributes	Default	Description
options	IFillStyleOptions	<optional>		Object object.
options.texture	PIXI.Texture	<optional>	PIXI.Texture.WHITE	Texture to fill
options.color	number	<optional>	0xffffff	Background to fill behind texture
options.alpha	number	<optional>	1	Alpha of fill
options.matrix	PIXI.Matrix	<optional>	null	Transform matrix

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

bezierCurveTo Graphics.ts:482

bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number) → {this}

Calculate the points for a bezier curve and then draws it.

Parameters:
Name	Type	Description
cpX	number	Control point x
cpY	number	Control point y
cpX2	number	Second Control point x
cpY2	number	Second Control point y
toX	number	Destination point x
toY	number	Destination point y

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

clear Graphics.ts:787

clear() → {this}

Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

clone Graphics.ts:186

clone() → {PIXI.Graphics}

Creates a new Graphics object with the same values as this one. Note that only the geometry of the object is cloned, not its transform (position,scale,etc)

Returns:
Type	Description
PIXI.Graphics	A clone of the graphics object

closePath Graphics.ts:1119

closePath() → {this}

Closes the current path.

Returns:
Type	Description
this	Returns itself.

containsPoint Graphics.ts:1043

containsPoint(point: IPointData) → {boolean}

Tests if a point is inside this graphics object

Parameters:
Name	Type	Description
point	IPointData	the point to test

Returns:
Type	Description
boolean	the result of the test

destroy Graphics.ts:1179

destroy(options: IDestroyOptions | boolean) → {void}

Destroys the Graphics object.

Parameters:
Name	Type	Attributes	Default	Description
options	IDestroyOptions \| boolean	<optional>		Options parameter. A boolean will act as if all options have been set to that value
options.children	boolean	<optional>	false	if set to true, all the children will have their destroy method called as well. 'options' will be passed on to those calls.
options.texture	boolean	<optional>	false	Only used for child Sprites if options.children is set to true Should it destroy the texture of the child sprite
options.baseTexture	boolean	<optional>	false	Only used for child Sprites if options.children is set to true Should it destroy the base texture of the child sprite

Returns:
Type	Description
void

drawChamferRect drawChamferRect.ts:3

drawChamferRect(this: PIXI.Graphics, x: number, y: number, width: number, height: number, chamfer: number) → {PIXI.Graphics}

Draw Rectangle with chamfer corners. These are angled corners.

Note: Only available with @pixi/graphics-extras.

Parameters:
Name	Type	Description
this	PIXI.Graphics
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

Returns:
Type	Description
PIXI.Graphics	Returns self.

drawCircle Graphics.ts:698

drawCircle(x: number, y: number, radius: number) → {this}

Draws a circle.

Parameters:
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	This Graphics object. Good for chaining method calls

drawEllipse Graphics.ts:710

drawEllipse(x: number, y: number, width: number, height: number) → {this}

Draws an ellipse.

Parameters:
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
width	number	The half width of the ellipse
height	number	The half height of the ellipse

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

drawFilletRect drawFilletRect.ts:3

drawFilletRect(this: PIXI.Graphics, x: number, y: number, width: number, height: number, fillet: number) → {PIXI.Graphics}

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

Note: Only available with @pixi/graphics-extras.

Parameters:
Name	Type	Description
this	PIXI.Graphics
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
PIXI.Graphics	Returns self.

drawPolygon Graphics.ts:726

drawPolygon(path: Array<number> | Array<PIXI.IPointData> | PIXI.Polygon) → {this}

Draws a polygon using the given path.

Parameters:
Name	Type	Description
path	Array<number> \| Array<PIXI.IPointData> \| PIXI.Polygon	The path data used to construct the polygon.

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

drawRect Graphics.ts:671

drawRect(x: number, y: number, width: number, height: number) → {this}

Draws a rectangle shape.

Parameters:
Name	Type	Description
x	number	The X coord of the top-left of the rectangle
y	number	The Y coord of the top-left of the rectangle
width	number	The width of the rectangle
height	number	The height of the rectangle

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

drawRegularPolygon drawRegularPolygon.ts:3

drawRegularPolygon(this: PIXI.Graphics, x: number, y: number, radius: number, sides: number, rotation: number) → {PIXI.Graphics}

Draw a regular polygon where all sides are the same length.

Note: Only available with @pixi/graphics-extras.

Parameters:
Name	Type	Default	Description
this	PIXI.Graphics
x	number		X position
y	number		Y position
radius	number		Polygon radius
sides	number		Minimum value is 3
rotation	number	0	Starting rotation values in radians..

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

drawRoundedPolygon drawRoundedPolygon.ts:3

drawRoundedPolygon(this: PIXI.Graphics, x: number, y: number, radius: number, sides: number, corner: number, rotation: number) → {PIXI.Graphics}

Draw a regular polygon with rounded corners.

Note: Only available with @pixi/graphics-extras.

Parameters:
Name	Type	Default	Description
this	PIXI.Graphics
x	number		X position
y	number		Y position
radius	number		Polygon radius
sides	number		Minimum value is 3
corner	number		Corner size in pixels.
rotation	number	0	Starting rotation values in radians..

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

drawRoundedRect Graphics.ts:684

drawRoundedRect(x: number, y: number, width: number, height: number, radius: number) → {this}

Draw a rectangle shape with rounded/beveled corners.

Parameters:
Name	Type	Description
x	number	The X coord of the top-left of the rectangle
y	number	The Y coord of the top-left of the rectangle
width	number	The width of the rectangle
height	number	The height of the rectangle
radius	number	Radius of the rectangle corners

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

drawShape Graphics.ts:763

drawShape(shape: PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.Rectangle | PIXI.RoundedRectangle) → {this}

Draw any shape.

Parameters:
Name	Type	Description
shape	PIXI.Circle \| PIXI.Ellipse \| PIXI.Polygon \| PIXI.Rectangle \| PIXI.RoundedRectangle	Shape to draw

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

drawStar drawStar.ts:42

drawStar(this: PIXI.Graphics, x: number, y: number, points: number, radius: number, innerRadius: number, rotation: number) → {PIXI.Graphics}

Draw a star shape with an arbitrary number of points.

Note: Only available with @pixi/graphics-extras.

Parameters:
Name	Type	Default	Description
this	PIXI.Graphics
x	number		Center X position of the star
y	number		Center Y position of the star
points	number		The number of points of the star, must be > 1
radius	number		The outer radius of the star
innerRadius	number		The inner radius between points, default half `radius`
rotation	number	0	The rotation of the star in radians, where 0 is vertical

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

drawTorus drawTorus.ts:3

drawTorus(this: PIXI.Graphics, x: number, y: number, innerRadius: number, outerRadius: number, startArc: number, endArc: number) → {PIXI.Graphics}

Draw a torus shape, like a donut. Can be used for something like a circle loader.

Note: Only available with @pixi/graphics-extras.

Parameters:
Name	Type	Attributes	Default	Description
this	PIXI.Graphics
x	number			X position
y	number			Y position
innerRadius	number			Inner circle radius
outerRadius	number			Outer circle radius
startArc	number	<optional>	0	Where to begin sweep, in radians, 0.0 = to the right
endArc	number	<optional>	Math.PI*2	Where to end sweep, in radians

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

endFill Graphics.ts:658

endFill() → {this}

Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

endHole Graphics.ts:1167

endHole() → {this}

End adding holes to the last draw shape.

Returns:
Type	Description
this	Returns itself.

generateCanvasTexture Graphics.ts:12

generateCanvasTexture(scaleMode: PIXI.SCALE_MODES, resolution: number) → {PIXI.Texture}

Generates a canvas texture. Only available with pixi.js-legacy bundle or the @pixi/canvas-graphics package.

Parameters:
Name	Type	Attributes	Default	Description
scaleMode	PIXI.SCALE_MODES	<optional>		The scale mode of the texture.
resolution	number		1	The resolution of the texture.

Returns:
Type	Description
PIXI.Texture	The new texture.

isFastRect Graphics.ts:805

isFastRect() → {boolean}

True if graphics consists of one rectangle, and thus, can be drawn like a Sprite and masked with gl.scissor.

Returns:
Type	Description
boolean	True if only 1 rect.

lineStyle Graphics.ts:249

lineStyle(width: ILineStyleOptions | number, color: number, alpha: number, alignment: number, native: boolean) → {this}

Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.

Parameters:
Name	Type	Attributes	Default	Description
width	ILineStyleOptions \| number	<optional>	0	width of the line to draw, will update the objects stored style
color	number	<optional>	0x0	color of the line to draw, will update the objects stored style
alpha	number	<optional>	1	alpha of the line to draw, will update the objects stored style
alignment	number	<optional>	0.5	alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer). WebGL only.
native	boolean	<optional>	false	If true the lines will be draw using LINES instead of TRIANGLE_STRIP

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

lineStyle Graphics.ts:262

lineStyle(options: ILineStyleOptions) → {PIXI.Graphics}

Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.

Parameters:
Name	Type	Attributes	Default	Description
options	ILineStyleOptions	<optional>		Line style options
options.width	number	<optional>	0	width of the line to draw, will update the objects stored style
options.color	number	<optional>	0x0	color of the line to draw, will update the objects stored style
options.alpha	number	<optional>	1	alpha of the line to draw, will update the objects stored style
options.alignment	number	<optional>	0.5	alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer). WebGL only.
options.native	boolean	<optional>	false	If true the lines will be draw using LINES instead of TRIANGLE_STRIP
options.cap	PIXI.LINE_CAP	<optional>	PIXI.LINE_CAP.BUTT	line cap style
options.join	PIXI.LINE_JOIN	<optional>	PIXI.LINE_JOIN.MITER	line join style
options.miterLimit	number	<optional>	10	miter limit ratio

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

lineTextureStyle Graphics.ts:291

lineTextureStyle(options: ILineStyleOptions) → {PIXI.Graphics}

Like line style but support texture for line fill.

Parameters:
Name	Type	Attributes	Default	Description
options	ILineStyleOptions	<optional>		Collection of options for setting line style.
options.width	number	<optional>	0	width of the line to draw, will update the objects stored style
options.texture	PIXI.Texture	<optional>	PIXI.Texture.WHITE	Texture to use
options.color	number	<optional>	0x0	color of the line to draw, will update the objects stored style. Default 0xFFFFFF if texture present.
options.alpha	number	<optional>	1	alpha of the line to draw, will update the objects stored style
options.matrix	PIXI.Matrix	<optional>	null	Texture matrix to transform texture
options.alignment	number	<optional>	0.5	alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outer). WebGL only.
options.native	boolean	<optional>	false	If true the lines will be draw using LINES instead of TRIANGLE_STRIP
options.cap	PIXI.LINE_CAP	<optional>	PIXI.LINE_CAP.BUTT	line cap style
options.join	PIXI.LINE_JOIN	<optional>	PIXI.LINE_JOIN.MITER	line join style
options.miterLimit	number	<optional>	10	miter limit ratio

Returns:
Type	Description
PIXI.Graphics	This Graphics object. Good for chaining method calls

lineTo Graphics.ts:410

lineTo(x: number, y: number) → {this}

Draws a line using the current line style from the current drawing position to (x, y); The current drawing position is then set to (x, y).

Parameters:
Name	Type	Description
x	number	the X coordinate to draw to
y	number	the Y coordinate to draw to

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

moveTo Graphics.ts:395

moveTo(x: number, y: number) → {this}

Moves the current drawing position to x, y.

Parameters:
Name	Type	Description
x	number	the X coordinate to move to
y	number	the Y coordinate to move to

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

quadraticCurveTo Graphics.ts:457

quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number) → {this}

Calculate the points for a quadratic bezier curve and then draws it. Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c

Parameters:
Name	Type	Description
cpX	number	Control point x
cpY	number	Control point y
toX	number	Destination point x
toY	number	Destination point y

Returns:
Type	Description
this	This Graphics object. Good for chaining method calls

renderCanvas Container.ts:17

renderCanvas(renderer: PIXI.CanvasRenderer) → {void}

Renders the object using the Canvas renderer

Parameters:
Name	Type	Description
renderer	PIXI.CanvasRenderer	The renderer

Returns:
Type	Description
void

setMatrix Graphics.ts:1139

setMatrix(matrix: PIXI.Matrix) → {this}

Apply a matrix to the positional data.

Parameters:
Name	Type	Description
matrix	PIXI.Matrix	Matrix to use for transform current shape.

Returns:
Type	Description
this	Returns itself.

Protected Methods

_calculateBounds Graphics.ts:1025

protected _calculateBounds() → {void}

Retrieves the bounds of the graphic shape as a rectangle object.

Returns:
Type	Description
void

_initCurve Graphics.ts:437

protected _initCurve(x: number, y: number) → {void}

Initialize the curve

Parameters:
Name	Type	Default	Description
x	number	0
y	number	0

Returns:
Type	Description
void

_populateBatches Graphics.ts:853

protected _populateBatches() → {void}

Populating batches for rendering.

Returns:
Type	Description
void

_render Graphics.ts:821

protected _render(renderer: PIXI.Renderer) → {void}

Renders the object using the WebGL renderer

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

_renderBatched Graphics.ts:898

protected _renderBatched(renderer: PIXI.Renderer) → {void}

Renders the batches using the BathedRenderer plugin

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

_renderDirect Graphics.ts:924

protected _renderDirect(renderer: PIXI.Renderer) → {void}

Renders the graphics direct

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
void

_renderDrawCallDirect Graphics.ts:965

protected _renderDrawCallDirect(renderer: PIXI.Renderer, drawCall: PIXI.BatchDrawCall) → {void}

Renders specific DrawCall

Parameters:
Name	Type	Description
renderer	PIXI.Renderer
drawCall	PIXI.BatchDrawCall

Returns:
Type	Description
void

_resolveDirectShader Graphics.ts:983

protected _resolveDirectShader(renderer: PIXI.Renderer) → {PIXI.Shader}

Resolves shader for direct rendering

Parameters:
Name	Type	Description
renderer	PIXI.Renderer	The renderer

Returns:
Type	Description
PIXI.Shader

calculateTints Graphics.ts:1055

protected calculateTints() → {void}

Recalculate the tint by applying tint to batches using Graphics tint.

Returns:
Type	Description
void

calculateVertices Graphics.ts:1084

protected calculateVertices() → {void}

If there's a transform update or a change to the shape of the geometry, recalculate the vertices.

Returns:
Type	Description
void

finishPoly Graphics.ts:375

protected finishPoly() → {void}

Finish the polygon object.

Returns:
Type	Description
void

startPoly Graphics.ts:349

protected startPoly() → {void}

Start a polygon object internally.

Returns:
Type	Description
void