0
# PIXI Graphics
1

2
PIXI Graphics is a comprehensive 2D graphics rendering library that provides powerful tools for drawing primitive shapes, complex paths, and vector graphics programmatically. It offers a chainable API for creating scalable graphics with support for fills, strokes, textures, transformations, and advanced geometric operations, all optimized for high-performance rendering in web applications and games.
3

4
## Package Information
5

6
- **Package Name**: @pixi/graphics
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @pixi/graphics`
10

11
## Core Imports
12

13
```typescript
14
import { Graphics, GraphicsGeometry, FillStyle, LineStyle } from "@pixi/graphics";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Graphics, GraphicsGeometry, FillStyle, LineStyle } = require("@pixi/graphics");
21
```
22

23
Import utilities:
24

25
```typescript
26
import { graphicsUtils } from "@pixi/graphics";
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { Graphics } from "@pixi/graphics";
33

34
// Create a new graphics object
35
const graphics = new Graphics();
36

37
// Draw a red rectangle
38
graphics
39
  .beginFill(0xff0000, 0.8)
40
  .drawRect(50, 50, 100, 100)
41
  .endFill();
42

43
// Draw a blue circle with yellow border
44
graphics
45
  .lineStyle(4, 0xffff00, 1)
46
  .beginFill(0x0000ff, 0.5)
47
  .drawCircle(200, 150, 50)
48
  .endFill();
49

50
// Draw a complex path
51
graphics
52
  .lineStyle(2, 0x00ff00)
53
  .moveTo(300, 100)
54
  .lineTo(400, 100)
55
  .quadraticCurveTo(450, 125, 400, 150)
56
  .lineTo(300, 150)
57
  .closePath();
58
```
59

60
## Architecture
61

62
PIXI Graphics is built around several key components:
63

64
- **Graphics Class**: Main drawing interface providing chainable methods for shape creation and styling
65
- **Geometry Management**: `GraphicsGeometry` class handles vertex data, batching, and GPU optimization
66
- **Style System**: `FillStyle` and `LineStyle` classes manage appearance properties including colors, textures, and line properties
67
- **Shape Building**: Utility functions and classes for constructing complex geometric shapes with optimized algorithms
68
- **Curve Mathematics**: Specialized utilities for bezier curves, quadratic curves, and arc calculations
69
- **Batching System**: Optimized rendering through `BatchPart` objects and draw call pooling
70

71
## Capabilities
72

73
### Core Drawing API
74

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

77
```typescript { .api }
78
class Graphics extends Container {
79
  constructor(geometry?: GraphicsGeometry);
80
  
81
  // Static properties
82
  static nextRoundedRectBehavior: boolean;
83
  
84
  // Shape drawing methods
85
  drawRect(x: number, y: number, width: number, height: number): this;
86
  drawCircle(x: number, y: number, radius: number): this;
87
  drawEllipse(x: number, y: number, width: number, height: number): this;
88
  drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): this;
89
  drawPolygon(...path: Array<number> | Array<IPointData>): this;
90
  drawShape(shape: IShape): this;
91
  
92
  // Path methods
93
  moveTo(x: number, y: number): this;
94
  lineTo(x: number, y: number): this;
95
  closePath(): this;
96
}
97
```
98

99
[Core Drawing API](./drawing-api.md)
100

101
### Styling and Fill System
102

103
Comprehensive styling system for controlling appearance of drawn graphics including solid fills, texture fills, gradients, and line styling with caps, joins, and alignment options.
104

105
```typescript { .api }
106
interface IFillStyleOptions {
107
  color?: number;
108
  alpha?: number;
109
  texture?: Texture;
110
  matrix?: Matrix;
111
}
112

113
interface ILineStyleOptions extends IFillStyleOptions {
114
  width?: number;
115
  alignment?: number;
116
  native?: boolean;
117
  cap?: LINE_CAP;
118
  join?: LINE_JOIN;
119
  miterLimit?: number;
120
}
121
```
122

123
[Styling and Fill System](./styling.md)
124

125
### Curve and Path Drawing
126

127
Advanced path drawing capabilities including bezier curves, quadratic curves, arcs, and complex path operations. Provides precise control over curve resolution and mathematical accuracy.
128

129
```typescript { .api }
130
interface Graphics {
131
  // Curve methods
132
  quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this;
133
  bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this;
134
  arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
135
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
136
}
137
```
138

139
[Curve and Path Drawing](./curves.md)
140

141
### Geometry Management
142

143
Low-level geometry management for advanced use cases including custom vertex manipulation, batching optimization, and geometry reuse across multiple graphics objects.
144

145
```typescript { .api }
146
class GraphicsGeometry extends BatchGeometry {
147
  constructor();
148
  
149
  readonly bounds: Bounds;
150
  points: number[];
151
  colors: number[];
152
  uvs: number[];
153
  indices: number[];
154
  graphicsData: GraphicsData[];
155
  batches: BatchPart[];
156
  
157
  drawShape(shape: IShape, fillStyle?: FillStyle, lineStyle?: LineStyle, matrix?: Matrix): GraphicsGeometry;
158
  clear(): GraphicsGeometry;
159
  updateBatches(): void;
160
}
161
```
162

163
[Geometry Management](./geometry.md)
164

165
### Graphics Utilities
166

167
Collection of utility functions and classes for shape building, curve calculations, and rendering optimizations. Includes mathematical utilities for arc, bezier, and quadratic curve operations.
168

169
```typescript { .api }
170
declare const graphicsUtils: {
171
  buildPoly: IShapeBuildCommand;
172
  buildCircle: IShapeBuildCommand;
173
  buildRectangle: IShapeBuildCommand;
174
  buildRoundedRectangle: IShapeBuildCommand;
175
  buildLine: (graphicsData: GraphicsData) => void;
176
  ArcUtils: typeof ArcUtils;
177
  BezierUtils: typeof BezierUtils;
178
  QuadraticUtils: typeof QuadraticUtils;
179
  BatchPart: typeof BatchPart;
180
  FILL_COMMANDS: Record<SHAPES, IShapeBuildCommand>;
181
  BATCH_POOL: Array<BatchPart>;
182
  DRAW_CALL_POOL: Array<BatchDrawCall>;
183
};
184
```
185

186
[Graphics Utilities](./utilities.md)