0
# Core Drawing API
1

2
Primary Graphics class providing chainable methods for drawing shapes, paths, and applying styles. Supports real-time graphics creation with immediate and deferred rendering modes.
3

4
## Capabilities
5

6
### Graphics Class Constructor
7

8
Creates a new Graphics object with optional geometry parameter for sharing geometry between multiple graphics instances.
9

10
```typescript { .api }
11
/**
12
 * Creates a new Graphics object
13
 * @param geometry - Optional GraphicsGeometry to share between multiple Graphics objects
14
 */
15
constructor(geometry?: GraphicsGeometry): Graphics;
16
```
17

18
### Basic Shape Drawing
19

20
Core shape drawing methods for common geometric primitives. All methods return `this` for method chaining.
21

22
```typescript { .api }
23
/**
24
 * Draws a rectangle
25
 * @param x - X position of the rectangle
26
 * @param y - Y position of the rectangle  
27
 * @param width - Width of the rectangle
28
 * @param height - Height of the rectangle
29
 */
30
drawRect(x: number, y: number, width: number, height: number): this;
31

32
/**
33
 * Draws a rounded rectangle
34
 * @param x - X position of the rectangle
35
 * @param y - Y position of the rectangle
36
 * @param width - Width of the rectangle
37
 * @param height - Height of the rectangle
38
 * @param radius - Corner radius
39
 */
40
drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this;
41

42
/**
43
 * Draws a circle
44
 * @param x - X center of the circle
45
 * @param y - Y center of the circle
46
 * @param radius - Radius of the circle
47
 */
48
drawCircle(x: number, y: number, radius: number): this;
49

50
/**
51
 * Draws an ellipse
52
 * @param x - X center of the ellipse
53
 * @param y - Y center of the ellipse
54
 * @param width - Width of the ellipse
55
 * @param height - Height of the ellipse
56
 */
57
drawEllipse(x: number, y: number, width: number, height: number): this;
58
```
59

60
### Polygon and Complex Shape Drawing
61

62
Methods for drawing polygons and arbitrary shapes from point data or shape objects.
63

64
```typescript { .api }
65
/**
66
 * Draws a polygon from a series of points
67
 * @param path - Array of numbers (x,y pairs) or Point objects, or Polygon object
68
 */
69
drawPolygon(...path: Array<number> | Array<IPointData>): this;
70
drawPolygon(path: Array<number> | Array<IPointData> | Polygon): this;
71

72
/**
73
 * Draws any IShape object (Circle, Ellipse, Polygon, Rectangle, RoundedRectangle)
74
 * @param shape - The shape object to draw
75
 */
76
drawShape(shape: IShape): this;
77
```
78

79
### Path Drawing Methods
80

81
Low-level path drawing methods for creating custom shapes and complex paths.
82

83
```typescript { .api }
84
/**
85
 * Moves the drawing position without drawing a line
86
 * @param x - X coordinate to move to
87
 * @param y - Y coordinate to move to
88
 */
89
moveTo(x: number, y: number): this;
90

91
/**
92
 * Draws a line from current position to specified coordinates
93
 * @param x - X coordinate to draw line to
94
 * @param y - Y coordinate to draw line to
95
 */
96
lineTo(x: number, y: number): this;
97

98
/**
99
 * Closes the current path by drawing a line back to the starting point
100
 */
101
closePath(): this;
102
```
103

104
### Fill Control Methods
105

106
Methods for controlling fill behavior and appearance of drawn shapes.
107

108
```typescript { .api }
109
/**
110
 * Begins a solid color fill
111
 * @param color - Hex color value (default: 0x000000)
112
 * @param alpha - Alpha transparency (default: 1)
113
 */
114
beginFill(color?: number, alpha?: number): this;
115

116
/**
117
 * Begins a texture fill with advanced options
118
 * @param options - Fill style options including texture, color, alpha, and matrix
119
 */
120
beginTextureFill(options?: IFillStyleOptions): this;
121

122
/**
123
 * Applies the current fill to all shapes drawn since beginFill/beginTextureFill
124
 */
125
endFill(): this;
126
```
127

128
### Hole Drawing
129

130
Methods for creating holes within filled shapes (complex path operations).
131

132
```typescript { .api }
133
/**
134
 * Begin adding holes to the last drawn shape
135
 */
136
beginHole(): this;
137

138
/**
139
 * End adding holes to the last drawn shape
140
 */
141
endHole(): this;
142
```
143

144
### Transform and Matrix Operations
145

146
Methods for applying transformations to drawing operations.
147

148
```typescript { .api }
149
/**
150
 * Applies a transformation matrix to subsequent drawing operations
151
 * @param matrix - Transformation matrix to apply
152
 */
153
setMatrix(matrix: Matrix): this;
154
```
155

156
### Graphics Management
157

158
Methods for managing graphics state and lifecycle.
159

160
```typescript { .api }
161
/**
162
 * Clears all graphics and resets fill/line styles to defaults
163
 */
164
clear(): this;
165

166
/**
167
 * Creates a clone of the Graphics object with the same geometry (not transforms)
168
 */
169
clone(): Graphics;
170

171
/**
172
 * Destroys the Graphics object and cleans up resources
173
 * @param options - Destroy options or boolean for children destruction
174
 */
175
destroy(options?: IDestroyOptions | boolean): void;
176
```
177

178
### Utility and Query Methods
179

180
Methods for querying graphics properties and optimization.
181

182
```typescript { .api }
183
/**
184
 * Tests if a point is inside the graphics object
185
 * @param point - Point to test for containment
186
 */
187
containsPoint(point: IPointData): boolean;
188

189
/**
190
 * Checks if graphics consists of a single rectangle for rendering optimization
191
 */
192
isFastRect(): boolean;
193
```
194

195
### Static Properties
196

197
Static properties for controlling global graphics behavior.
198

199
```typescript { .api }
200
/**
201
 * New rendering behavior for rounded rectangles: circular arcs instead of quadratic bezier curves.
202
 * In the next major release, this will be enabled by default.
203
 */
204
static nextRoundedRectBehavior: boolean;
205
```
206

207
### Properties
208

209
Key properties for controlling graphics appearance and behavior.
210

211
```typescript { .api }
212
/**
213
 * Renderer plugin name for batching (default: 'batch')
214
 */
215
pluginName: string;
216

217
/**
218
 * Blend mode applied to graphic shapes
219
 */
220
blendMode: BLEND_MODES;
221

222
/**
223
 * Hex tint value applied to each graphic shape (default: 0xFFFFFF)
224
 */
225
tint: number;
226

227
/**
228
 * Vertex and fragment shaders for GPU processing
229
 */
230
shader: Shader;
231

232
/**
233
 * Graphics geometry containing vertex positions, indices, colors, and UVs (readonly)
234
 */
235
readonly geometry: GraphicsGeometry;
236

237
/**
238
 * Current path being drawn (readonly)
239
 */
240
readonly currentPath: Polygon;
241

242
/**
243
 * Current fill style configuration (readonly)
244
 */
245
readonly fill: FillStyle;
246

247
/**
248
 * Current line style configuration (readonly)
249
 */
250
readonly line: LineStyle;
251
```
252

253
## Usage Examples
254

255
**Basic Shape Drawing:**
256

257
```typescript
258
import { Graphics } from "@pixi/graphics";
259

260
const graphics = new Graphics();
261

262
// Draw multiple shapes with method chaining
263
graphics
264
  .beginFill(0xff0000, 0.8)
265
  .drawRect(0, 0, 100, 100)
266
  .drawCircle(150, 50, 30)
267
  .endFill()
268
  .beginFill(0x00ff00)
269
  .drawPolygon([200, 0, 250, 50, 200, 100, 150, 50])
270
  .endFill();
271
```
272

273
**Complex Path Drawing:**
274

275
```typescript
276
const graphics = new Graphics();
277

278
graphics
279
  .lineStyle(2, 0x0000ff)
280
  .moveTo(50, 50)
281
  .lineTo(150, 50)
282
  .lineTo(150, 150)
283
  .lineTo(50, 150)
284
  .closePath()
285
  .beginFill(0xffff00, 0.5)
286
  .moveTo(75, 75)
287
  .lineTo(125, 75)
288
  .lineTo(125, 125)
289
  .lineTo(75, 125)
290
  .closePath()
291
  .endFill();
292
```
293

294
**Shape with Holes:**
295

296
```typescript
297
const graphics = new Graphics();
298

299
// Draw outer shape
300
graphics
301
  .beginFill(0xff0000)
302
  .drawRect(0, 0, 200, 200)
303
  // Add holes
304
  .beginHole()
305
  .drawCircle(50, 50, 20)
306
  .drawCircle(150, 50, 20)
307
  .drawRect(75, 100, 50, 50)
308
  .endHole()
309
  .endFill();
310
```