0
# Vector Graphics
1

2
Canvas-like vector graphics API for drawing shapes, paths, and complex graphics programmatically. The Graphics class provides immediate-mode drawing similar to HTML5 Canvas 2D API.
3

4
## Capabilities
5

6
### Graphics Class
7

8
The main vector graphics drawing class.
9

10
```typescript { .api }
11
/**
12
 * Graphics class for drawing vector shapes and paths
13
 */
14
class Graphics extends Container {
15
    /** Current fill style */
16
    fill: FillStyle;
17
    /** Current line style */
18
    line: LineStyle;
19
    /** Graphics geometry data */
20
    geometry: GraphicsGeometry;
21
    /** Shader for rendering */
22
    shader: Shader;
23
    /** Current tint */
24
    tint: number;
25
    /** Current blend mode */
26
    blendMode: BLEND_MODES;
27
    
28
    constructor();
29
    
30
    /**
31
     * Begin fill with color and alpha
32
     * @param color - Fill color (hex)
33
     * @param alpha - Fill alpha (0-1)
34
     */
35
    beginFill(color?: number, alpha?: number): this;
36
    
37
    /** End current fill */
38
    endFill(): this;
39
    
40
    /**
41
     * Set line style
42
     * @param width - Line width
43
     * @param color - Line color
44
     * @param alpha - Line alpha
45
     * @param alignment - Line alignment (0-1)
46
     * @param native - Use native lines
47
     */
48
    lineStyle(width?: number, color?: number, alpha?: number, alignment?: number, native?: boolean): this;
49
    
50
    /**
51
     * Move drawing cursor to position
52
     * @param x - X coordinate
53
     * @param y - Y coordinate
54
     */
55
    moveTo(x: number, y: number): this;
56
    
57
    /**
58
     * Draw line to position
59
     * @param x - X coordinate  
60
     * @param y - Y coordinate
61
     */
62
    lineTo(x: number, y: number): this;
63
    
64
    /**
65
     * Draw bezier curve
66
     * @param cpX - Control point 1 X
67
     * @param cpY - Control point 1 Y
68
     * @param cpX2 - Control point 2 X
69
     * @param cpY2 - Control point 2 Y
70
     * @param toX - End point X
71
     * @param toY - End point Y
72
     */
73
    bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this;
74
    
75
    /**
76
     * Draw quadratic curve
77
     * @param cpX - Control point X
78
     * @param cpY - Control point Y
79
     * @param toX - End point X
80
     * @param toY - End point Y
81
     */
82
    quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this;
83
    
84
    /**
85
     * Draw rectangle
86
     * @param x - X position
87
     * @param y - Y position
88
     * @param width - Width
89
     * @param height - Height
90
     */
91
    drawRect(x: number, y: number, width: number, height: number): this;
92
    
93
    /**
94
     * Draw rounded rectangle
95
     * @param x - X position
96
     * @param y - Y position
97
     * @param width - Width
98
     * @param height - Height
99
     * @param radius - Corner radius
100
     */
101
    drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this;
102
    
103
    /**
104
     * Draw circle
105
     * @param x - Center X
106
     * @param y - Center Y
107
     * @param radius - Radius
108
     */
109
    drawCircle(x: number, y: number, radius: number): this;
110
    
111
    /**
112
     * Draw ellipse
113
     * @param x - Center X
114
     * @param y - Center Y
115
     * @param halfWidth - Half width
116
     * @param halfHeight - Half height
117
     */
118
    drawEllipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
119
    
120
    /**
121
     * Draw polygon
122
     * @param path - Points array or Polygon
123
     */
124
    drawPolygon(path: number[] | Point[] | Polygon): this;
125
    
126
    /**
127
     * Draw star
128
     * @param x - Center X
129
     * @param y - Center Y
130
     * @param points - Number of points
131
     * @param radius - Outer radius
132
     * @param innerRadius - Inner radius
133
     * @param rotation - Rotation in radians
134
     */
135
    drawStar(x: number, y: number, points: number, radius: number, innerRadius?: number, rotation?: number): this;
136
    
137
    /** Clear all graphics */
138
    clear(): this;
139
    
140
    /** Check if point is inside graphics */
141
    containsPoint(point: IPointData): boolean;
142
    
143
    /** Generate texture from graphics */
144
    generateCanvasTexture(scaleMode?: SCALE_MODES, resolution?: number): Texture;
145
    
146
    /** Close current path */
147
    closePath(): this;
148
    
149
    /** Start new hole in current path */
150
    beginHole(): this;
151
    
152
    /** End current hole */
153
    endHole(): this;
154
    
155
    /** Clone graphics */
156
    clone(): Graphics;
157
    
158
    /** Destroy graphics */
159
    destroy(options?: IDestroyOptions): void;
160
}
161
```
162

163
**Usage Examples:**
164

165
```typescript
166
import { Graphics } from "pixi.js";
167

168
// Create graphics object
169
const graphics = new Graphics();
170

171
// Draw a red rectangle
172
graphics.beginFill(0xff0000);
173
graphics.drawRect(0, 0, 100, 100);
174
graphics.endFill();
175

176
// Draw a blue circle with yellow border
177
graphics.lineStyle(4, 0xffff00, 1);
178
graphics.beginFill(0x0000ff);
179
graphics.drawCircle(200, 200, 50);
180
graphics.endFill();
181

182
// Draw custom path
183
graphics.lineStyle(2, 0x00ff00);
184
graphics.moveTo(50, 50);
185
graphics.lineTo(100, 100);
186
graphics.lineTo(150, 50);
187
graphics.bezierCurveTo(150, 100, 200, 100, 200, 50);
188

189
// Add to stage
190
app.stage.addChild(graphics);
191
```
192

193
### Graphics Geometry
194

195
Low-level geometry data for graphics objects.
196

197
```typescript { .api }
198
/**
199
 * Graphics geometry containing vertex and index data
200
 */
201
class GraphicsGeometry extends Geometry {
202
    /** Graphics data array */
203
    graphicsData: GraphicsData[];
204
    /** Batch information */
205
    batches: GraphicsBatchInfo[];
206
    /** Bounds */
207
    bounds: Bounds;
208
    /** Bounds rectangle */
209
    boundsPadding: number;
210
    /** Whether geometry is dirty */
211
    dirty: boolean;
212
    
213
    constructor();
214
    
215
    /** Clear geometry */
216
    clear(): this;
217
    
218
    /** Draw shape */
219
    drawShape(shape: Circle | Ellipse | Polygon | Rectangle | RoundedRectangle, fillStyle?: FillStyle, lineStyle?: LineStyle): this;
220
    
221
    /** Update batches */
222
    updateBatches(): void;
223
    
224
    /** Calculate bounds */
225
    calculateBounds(): void;
226
    
227
    /** Add batch */
228
    addBatch(style: BatchableStyle): GraphicsBatchInfo;
229
    
230
    /** Check if point is inside */
231
    containsPoint(point: IPointData): boolean;
232
    
233
    /** Clone geometry */
234
    clone(): GraphicsGeometry;
235
    
236
    /** Destroy geometry */
237
    destroy(): void;
238
}
239

240
/**
241
 * Individual graphics drawing command
242
 */
243
class GraphicsData {
244
    /** Shape to draw */
245
    shape: Circle | Ellipse | Polygon | Rectangle | RoundedRectangle;
246
    /** Line style */
247
    lineStyle: LineStyle;
248
    /** Fill style */
249
    fillStyle: FillStyle;
250
    /** Transform matrix */
251
    matrix: Matrix;
252
    /** Drawing type */
253
    type: SHAPES;
254
    /** Points array */
255
    points: number[];
256
    /** Holes array */
257
    holes: GraphicsData[];
258
    
259
    constructor(shape: IShape, fillStyle?: FillStyle, lineStyle?: LineStyle, matrix?: Matrix);
260
    
261
    /** Clone graphics data */
262
    clone(): GraphicsData;
263
    
264
    /** Destroy graphics data */
265
    destroy(): void;
266
}
267
```
268

269
### Fill and Line Styles
270

271
Styling objects for graphics rendering.
272

273
```typescript { .api }
274
/**
275
 * Fill style for graphics objects
276
 */
277
class FillStyle {
278
    /** Fill color */
279
    color: number;
280
    /** Fill alpha */
281
    alpha: number;
282
    /** Fill texture */
283
    texture: Texture;
284
    /** Texture matrix */
285
    matrix: Matrix;
286
    /** Fill visible */
287
    visible: boolean;
288
    
289
    constructor();
290
    
291
    /** Clone fill style */
292
    clone(): FillStyle;
293
    
294
    /** Reset fill style */
295
    reset(): void;
296
    
297
    /** Destroy fill style */
298
    destroy(): void;
299
}
300

301
/**
302
 * Line style for graphics objects
303
 */
304
class LineStyle extends FillStyle {
305
    /** Line width */
306
    width: number;
307
    /** Line alignment */
308
    alignment: number;
309
    /** Use native lines */
310
    native: boolean;
311
    /** Line cap style */
312
    cap: LINE_CAP;
313
    /** Line join style */
314
    join: LINE_JOIN;
315
    /** Miter limit */
316
    miterLimit: number;
317
    
318
    constructor();
319
    
320
    /** Clone line style */
321
    clone(): LineStyle;
322
}
323

324
enum LINE_CAP {
325
    BUTT = 'butt',
326
    ROUND = 'round',
327
    SQUARE = 'square'
328
}
329

330
enum LINE_JOIN {
331
    MITER = 'miter',
332
    BEVEL = 'bevel',
333
    ROUND = 'round'
334
}
335
```
336

337
### Graphics Utils
338

339
Utility functions for building complex shapes.
340

341
```typescript { .api }
342
/**
343
 * Graphics utilities for shape building
344
 */
345
const graphicsUtils: {
346
    /**
347
     * Build rectangle
348
     * @param graphicsData - Graphics data
349
     * @param webgl - WebGL data
350
     */
351
    buildRectangle(graphicsData: GraphicsData, webgl: GraphicsGeometry): void;
352
    
353
    /**
354
     * Build rounded rectangle
355
     * @param graphicsData - Graphics data
356
     * @param webgl - WebGL data
357
     */
358
    buildRoundedRectangle(graphicsData: GraphicsData, webgl: GraphicsGeometry): void;
359
    
360
    /**
361
     * Build circle
362
     * @param graphicsData - Graphics data
363
     * @param webgl - WebGL data
364
     */
365
    buildCircle(graphicsData: GraphicsData, webgl: GraphicsGeometry): void;
366
    
367
    /**
368
     * Build polygon
369
     * @param graphicsData - Graphics data
370
     * @param webgl - WebGL data
371
     */
372
    buildPoly(graphicsData: GraphicsData, webgl: GraphicsGeometry): void;
373
    
374
    /**
375
     * Triangulate polygon
376
     * @param points - Polygon points
377
     * @param holes - Hole indices
378
     * @param triangles - Output triangles
379
     */
380
    triangulate(points: number[], holes: number[], triangles: number[]): void;
381
};
382
```
383

384
## Advanced Graphics Features
385

386
```typescript
387
import { Graphics, Texture, Matrix } from "pixi.js";
388

389
// Textured fills
390
const graphics = new Graphics();
391
const texture = Texture.from('pattern.png');
392
graphics.beginTextureFill({ texture });
393
graphics.drawRect(0, 0, 200, 200);
394
graphics.endFill();
395

396
// Gradient fills (using texture)
397
const canvas = document.createElement('canvas');
398
canvas.width = 100;
399
canvas.height = 100;
400
const ctx = canvas.getContext('2d');
401
const gradient = ctx.createLinearGradient(0, 0, 100, 0);
402
gradient.addColorStop(0, 'red');
403
gradient.addColorStop(1, 'blue');
404
ctx.fillStyle = gradient;
405
ctx.fillRect(0, 0, 100, 100);
406

407
const gradientTexture = Texture.from(canvas);
408
graphics.beginTextureFill({ texture: gradientTexture });
409
graphics.drawCircle(50, 50, 30);
410
graphics.endFill();
411

412
// Complex paths with holes
413
graphics.beginFill(0xff0000);
414
graphics.drawRect(0, 0, 200, 200);
415
graphics.beginHole();
416
graphics.drawCircle(100, 100, 50);
417
graphics.endHole();
418
graphics.endFill();
419

420
// Interactive graphics
421
graphics.interactive = true;
422
graphics.on('pointerdown', () => {
423
    graphics.tint = Math.random() * 0xffffff;
424
});
425

426
// Generate texture from graphics
427
const renderTexture = graphics.generateCanvasTexture();
428
const sprite = new Sprite(renderTexture);
429
```
430

431
## Performance Considerations
432

433
```typescript
434
// Batch similar graphics operations
435
const graphics = new Graphics();
436

437
// Instead of multiple separate draws
438
// graphics.beginFill(0xff0000);
439
// graphics.drawRect(0, 0, 10, 10);
440
// graphics.endFill();
441
// graphics.beginFill(0xff0000);
442
// graphics.drawRect(20, 0, 10, 10);
443
// graphics.endFill();
444

445
// Do this:
446
graphics.beginFill(0xff0000);
447
graphics.drawRect(0, 0, 10, 10);
448
graphics.drawRect(20, 0, 10, 10);
449
graphics.drawRect(40, 0, 10, 10);
450
graphics.endFill();
451

452
// For frequently changing graphics, consider using geometry directly
453
const geometry = new GraphicsGeometry();
454
const customGraphics = new Graphics(geometry);
455

456
// Reuse graphics objects
457
const graphicsPool = [];
458
function getGraphics() {
459
    return graphicsPool.pop() || new Graphics();
460
}
461

462
function releaseGraphics(graphics) {
463
    graphics.clear();
464
    graphicsPool.push(graphics);
465
}
466
```