0
# Graphics and Drawing
1

2
Vector graphics drawing API for creating shapes, paths, fills, and strokes. The Graphics class provides a powerful vector drawing system with support for SVG path commands, gradients, patterns, and complex shapes.
3

4
## Capabilities
5

6
### Graphics Class
7

8
Main graphics drawing class for creating vector shapes and paths.
9

10
```typescript { .api }
11
/**
12
 * Graphics class for drawing vector shapes and paths
13
 */
14
class Graphics extends Container {
15
  constructor(context?: GraphicsContext);
16
  
17
  /** Graphics drawing context */
18
  context: GraphicsContext;
19
  
20
  /** Current fill style */
21
  fill: FillStyle;
22
  
23
  /** Current stroke style */
24
  stroke: StrokeStyle;
25
  
26
  /**
27
   * Draw rectangle
28
   * @param x - X position
29
   * @param y - Y position
30
   * @param width - Width
31
   * @param height - Height
32
   * @returns This graphics instance
33
   */
34
  rect(x: number, y: number, width: number, height: number): this;
35
  
36
  /**
37
   * Draw rounded rectangle
38
   * @param x - X position
39
   * @param y - Y position
40
   * @param width - Width
41
   * @param height - Height
42
   * @param radius - Corner radius
43
   * @returns This graphics instance
44
   */
45
  roundRect(x: number, y: number, width: number, height: number, radius: number): this;
46
  
47
  /**
48
   * Draw circle
49
   * @param x - Center X
50
   * @param y - Center Y
51
   * @param radius - Radius
52
   * @returns This graphics instance
53
   */
54
  circle(x: number, y: number, radius: number): this;
55
  
56
  /**
57
   * Draw ellipse
58
   * @param x - Center X
59
   * @param y - Center Y
60
   * @param halfWidth - Half width
61
   * @param halfHeight - Half height
62
   * @returns This graphics instance
63
   */
64
  ellipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
65
  
66
  /**
67
   * Draw polygon from points
68
   * @param points - Array of points or flat coordinate array
69
   * @returns This graphics instance
70
   */
71
  poly(points: PointData[] | number[]): this;
72
  
73
  /**
74
   * Draw regular polygon
75
   * @param x - Center X
76
   * @param y - Center Y
77
   * @param radius - Radius
78
   * @param sides - Number of sides
79
   * @param rotation - Rotation angle
80
   * @returns This graphics instance
81
   */
82
  regularPoly(x: number, y: number, radius: number, sides: number, rotation?: number): this;
83
  
84
  /**
85
   * Draw star shape
86
   * @param x - Center X
87
   * @param y - Center Y
88
   * @param points - Number of points
89
   * @param radius - Outer radius
90
   * @param innerRadius - Inner radius
91
   * @param rotation - Rotation angle
92
   * @returns This graphics instance
93
   */
94
  star(x: number, y: number, points: number, radius: number, innerRadius?: number, rotation?: number): this;
95
  
96
  /**
97
   * Fill current path
98
   * @param style - Fill style
99
   * @returns This graphics instance
100
   */
101
  fill(style?: FillInput): this;
102
  
103
  /**
104
   * Stroke current path
105
   * @param style - Stroke style
106
   * @returns This graphics instance
107
   */
108
  stroke(style?: StrokeInput): this;
109
  
110
  /**
111
   * Clear all graphics
112
   * @returns This graphics instance
113
   */
114
  clear(): this;
115
  
116
  /**
117
   * Cut a hole in the current path
118
   * @returns This graphics instance
119
   */
120
  cut(): this;
121
  
122
  /**
123
   * Save current graphics state
124
   * @returns This graphics instance
125
   */
126
  save(): this;
127
  
128
  /**
129
   * Restore previous graphics state
130
   * @returns This graphics instance
131
   */
132
  restore(): this;
133
  
134
  /**
135
   * Get local bounds
136
   * @param out - Rectangle to store bounds
137
   * @returns Bounds rectangle
138
   */
139
  getLocalBounds(out?: Rectangle): Rectangle;
140
  
141
  /**
142
   * Check if point is inside graphics
143
   * @param point - Point to test
144
   * @returns True if point is inside
145
   */
146
  containsPoint(point: PointData): boolean;
147
  
148
  /**
149
   * Destroy graphics and clean up
150
   * @param options - Destroy options
151
   */
152
  destroy(options?: DestroyOptions): void;
153
  
154
  /**
155
   * Clone graphics
156
   * @returns Cloned graphics
157
   */
158
  clone(): Graphics;
159
}
160
```
161

162
### Graphics Context
163

164
Lower-level graphics context for path building and drawing operations.
165

166
```typescript { .api }
167
/**
168
 * Graphics context for path building and drawing
169
 */
170
class GraphicsContext {
171
  constructor();
172
  
173
  /**
174
   * Move to position without drawing
175
   * @param x - X position
176
   * @param y - Y position
177
   * @returns This context
178
   */
179
  moveTo(x: number, y: number): this;
180
  
181
  /**
182
   * Draw line to position
183
   * @param x - X position
184
   * @param y - Y position
185
   * @returns This context
186
   */
187
  lineTo(x: number, y: number): this;
188
  
189
  /**
190
   * Draw quadratic curve
191
   * @param cpx - Control point X
192
   * @param cpy - Control point Y
193
   * @param x - End X
194
   * @param y - End Y
195
   * @returns This context
196
   */
197
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
198
  
199
  /**
200
   * Draw bezier curve
201
   * @param cp1x - Control point 1 X
202
   * @param cp1y - Control point 1 Y
203
   * @param cp2x - Control point 2 X
204
   * @param cp2y - Control point 2 Y
205
   * @param x - End X
206
   * @param y - End Y
207
   * @returns This context
208
   */
209
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
210
  
211
  /**
212
   * Draw arc
213
   * @param x - Center X
214
   * @param y - Center Y
215
   * @param radius - Radius
216
   * @param startAngle - Start angle in radians
217
   * @param endAngle - End angle in radians
218
   * @param anticlockwise - Draw counter-clockwise
219
   * @returns This context
220
   */
221
  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
222
  
223
  /**
224
   * Draw arc to point
225
   * @param x1 - Control point X
226
   * @param y1 - Control point Y
227
   * @param x2 - End point X
228
   * @param y2 - End point Y
229
   * @param radius - Arc radius
230
   * @returns This context
231
   */
232
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
233
  
234
  /**
235
   * Close current path
236
   * @returns This context
237
   */
238
  closePath(): this;
239
  
240
  /**
241
   * Draw rectangle
242
   * @param x - X position
243
   * @param y - Y position
244
   * @param width - Width
245
   * @param height - Height
246
   * @returns This context
247
   */
248
  rect(x: number, y: number, width: number, height: number): this;
249
  
250
  /**
251
   * Draw rounded rectangle
252
   * @param x - X position
253
   * @param y - Y position
254
   * @param width - Width
255
   * @param height - Height
256
   * @param radius - Corner radius
257
   * @returns This context
258
   */
259
  roundRect(x: number, y: number, width: number, height: number, radius: number): this;
260
  
261
  /**
262
   * Draw circle
263
   * @param x - Center X
264
   * @param y - Center Y
265
   * @param radius - Radius
266
   * @returns This context
267
   */
268
  circle(x: number, y: number, radius: number): this;
269
  
270
  /**
271
   * Draw ellipse
272
   * @param x - Center X
273
   * @param y - Center Y
274
   * @param halfWidth - Half width
275
   * @param halfHeight - Half height
276
   * @returns This context
277
   */
278
  ellipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
279
  
280
  /**
281
   * Clear all paths
282
   * @returns This context
283
   */
284
  clear(): this;
285
  
286
  /**
287
   * Get bounds of all paths
288
   * @param out - Rectangle to store bounds
289
   * @returns Bounds rectangle
290
   */
291
  getBounds(out?: Rectangle): Rectangle;
292
  
293
  /**
294
   * Clone context
295
   * @returns Cloned context
296
   */
297
  clone(): GraphicsContext;
298
}
299
```
300

301
### Fill Styles
302

303
Various fill style options for graphics shapes.
304

305
```typescript { .api }
306
/**
307
 * Solid color fill
308
 */
309
interface FillStyle {
310
  /** Fill color */
311
  color: ColorSource;
312
  
313
  /** Fill alpha */
314
  alpha: number;
315
  
316
  /** Visible flag */
317
  visible: boolean;
318
}
319

320
/**
321
 * Gradient fill
322
 */
323
class FillGradient {
324
  constructor(x0: number, y0: number, x1: number, y1: number);
325
  
326
  /** Gradient type */
327
  type: 'linear' | 'radial';
328
  
329
  /** Start X position */
330
  x0: number;
331
  
332
  /** Start Y position */
333
  y0: number;
334
  
335
  /** End X position */
336
  x1: number;
337
  
338
  /** End Y position */
339
  y1: number;
340
  
341
  /** Color stops */
342
  stops: GradientStop[];
343
  
344
  /**
345
   * Add color stop
346
   * @param offset - Position (0-1)
347
   * @param color - Color at stop
348
   * @returns This gradient
349
   */
350
  addColorStop(offset: number, color: ColorSource): this;
351
  
352
  /**
353
   * Create linear gradient
354
   * @param x0 - Start X
355
   * @param y0 - Start Y
356
   * @param x1 - End X
357
   * @param y1 - End Y
358
   * @returns Linear gradient
359
   */
360
  static createLinearGradient(x0: number, y0: number, x1: number, y1: number): FillGradient;
361
  
362
  /**
363
   * Create radial gradient
364
   * @param x0 - Start X
365
   * @param y0 - Start Y
366
   * @param r0 - Start radius
367
   * @param x1 - End X
368
   * @param y1 - End Y
369
   * @param r1 - End radius
370
   * @returns Radial gradient
371
   */
372
  static createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): FillGradient;
373
}
374

375
/**
376
 * Pattern fill
377
 */
378
class FillPattern {
379
  constructor(texture: Texture, matrix?: Matrix);
380
  
381
  /** Pattern texture */
382
  texture: Texture;
383
  
384
  /** Transform matrix */
385
  matrix: Matrix;
386
  
387
  /** Repeat mode */
388
  repeat: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
389
}
390

391
interface GradientStop {
392
  /** Stop position (0-1) */
393
  offset: number;
394
  
395
  /** Color at stop */
396
  color: ColorSource;
397
}
398

399
type FillInput = ColorSource | FillStyle | FillGradient | FillPattern;
400
```
401

402
### Stroke Styles
403

404
Stroke style options for graphics outlines.
405

406
```typescript { .api }
407
/**
408
 * Stroke style configuration
409
 */
410
interface StrokeStyle {
411
  /** Stroke color */
412
  color: ColorSource;
413
  
414
  /** Stroke alpha */
415
  alpha: number;
416
  
417
  /** Stroke width */
418
  width: number;
419
  
420
  /** Line cap style */
421
  cap: 'butt' | 'round' | 'square';
422
  
423
  /** Line join style */
424
  join: 'miter' | 'round' | 'bevel';
425
  
426
  /** Miter limit */
427
  miterLimit: number;
428
}
429

430
type StrokeInput = ColorSource | StrokeStyle;
431
```
432

433
### SVG Path Support
434

435
SVG path parsing and rendering support.
436

437
```typescript { .api }
438
/**
439
 * SVG path parser
440
 */
441
class SVGParser {
442
  /**
443
   * Parse SVG path string
444
   * @param path - SVG path string
445
   * @returns Graphics path
446
   */
447
  static parsePath(path: string): GraphicsPath;
448
  
449
  /**
450
   * Parse SVG element
451
   * @param svg - SVG element or string
452
   * @returns Graphics context
453
   */
454
  static parseSVG(svg: string | SVGElement): GraphicsContext;
455
}
456

457
/**
458
 * Graphics path for complex shapes
459
 */
460
class GraphicsPath {
461
  constructor();
462
  
463
  /** Path instructions */
464
  instructions: PathInstruction[];
465
  
466
  /**
467
   * Move to position
468
   * @param x - X position
469
   * @param y - Y position
470
   * @returns This path
471
   */
472
  moveTo(x: number, y: number): this;
473
  
474
  /**
475
   * Line to position
476
   * @param x - X position
477
   * @param y - Y position
478
   * @returns This path
479
   */
480
  lineTo(x: number, y: number): this;
481
  
482
  /**
483
   * Close path
484
   * @returns This path
485
   */
486
  closePath(): this;
487
  
488
  /**
489
   * Get bounds
490
   * @param out - Rectangle to store bounds
491
   * @returns Bounds rectangle
492
   */
493
  getBounds(out?: Rectangle): Rectangle;
494
}
495
```
496

497
**Usage Examples:**
498

499
```typescript
500
import { Graphics, FillGradient, FillPattern, Assets } from 'pixi.js';
501

502
// Basic shapes
503
const graphics = new Graphics();
504

505
// Rectangle with fill and stroke
506
graphics
507
  .rect(0, 0, 100, 100)
508
  .fill(0xff0000)
509
  .stroke({ color: 0x000000, width: 2 });
510

511
// Circle with gradient fill
512
const gradient = new FillGradient(0, 0, 100, 100);
513
gradient.addColorStop(0, 0xff0000);
514
gradient.addColorStop(1, 0x0000ff);
515

516
graphics
517
  .circle(200, 50, 50)
518
  .fill(gradient);
519

520
// Complex path
521
graphics
522
  .moveTo(300, 0)
523
  .lineTo(350, 50)
524
  .lineTo(300, 100)
525
  .lineTo(250, 50)
526
  .closePath()
527
  .fill(0x00ff00);
528

529
// Pattern fill
530
const texture = await Assets.load('pattern.png');
531
const pattern = new FillPattern(texture);
532

533
graphics
534
  .rect(400, 0, 100, 100)
535
  .fill(pattern);
536

537
// Advanced drawing with context
538
const context = graphics.context;
539
context.save();
540
context.moveTo(0, 150);
541
context.bezierCurveTo(50, 100, 150, 200, 200, 150);
542
context.stroke({ color: 0xff00ff, width: 3 });
543
context.restore();
544

545
// SVG path
546
graphics.svg('M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z');
547
graphics.fill(0xffff00);
548

549
// Interactive graphics
550
graphics.interactive = true;
551
graphics.on('pointerdown', (event) => {
552
  console.log('Graphics clicked at', event.global.x, event.global.y);
553
});
554

555
// Animation
556
app.ticker.add(() => {
557
  graphics.rotation += 0.01;
558
});
559
```