0
# PixiJS
1

2
PixiJS is a fast, lightweight 2D graphics library for web browsers that provides WebGL and WebGPU rendering capabilities for creating rich, interactive graphics and cross-platform applications. The library offers a comprehensive API for handling sprites, textures, filters, animations, and complex scene management with features including asset loading, multi-touch support, flexible text rendering, SVG drawing, dynamic textures, masking, and advanced blend modes.
3

4
## Package Information
5

6
- **Package Name**: pixi.js
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install pixi.js`
10

11
## Core Imports
12

13
```typescript
14
import { Application, Assets, Sprite, Container, Graphics, Text } from 'pixi.js';
15

16
// Additional display objects
17
import { Mesh, ParticleContainer, TilingSprite, NineSliceSprite, AnimatedSprite } from 'pixi.js';
18
```
19

20
For CommonJS:
21

22
```javascript
23
const { Application, Assets, Sprite, Container, Graphics, Text } = require('pixi.js');
24

25
// Additional display objects
26
const { Mesh, ParticleContainer, TilingSprite, NineSliceSprite, AnimatedSprite } = require('pixi.js');
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { Application, Assets, Sprite } from 'pixi.js';
33

34
(async () => {
35
    // Create a new application
36
    const app = new Application();
37

38
    // Initialize the application
39
    await app.init({ background: '#1099bb', resizeTo: window });
40

41
    // Append the application canvas to the document body
42
    document.body.appendChild(app.canvas);
43

44
    // Load a texture
45
    const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
46

47
    // Create a sprite
48
    const bunny = new Sprite(texture);
49
    bunny.anchor.set(0.5);
50
    bunny.x = app.screen.width / 2;
51
    bunny.y = app.screen.height / 2;
52

53
    app.stage.addChild(bunny);
54

55
    // Animate the sprite
56
    app.ticker.add((time) => {
57
        bunny.rotation += 0.1 * time.deltaTime;
58
    });
59
})();
60
```
61

62
## Architecture
63

64
PixiJS follows a hierarchical display object architecture:
65

66
- **Application**: Top-level container managing canvas, renderer, and scene
67
- **Stage**: Root display object container for the scene graph
68
- **Display Objects**: Visual elements (Sprite, Graphics, Text, Container)
69
- **Renderer**: Rendering engine (WebGL, WebGPU, or Canvas)
70
- **Assets**: Asset loading and management system
71

72
The library supports multiple rendering backends and provides a plugin system for extending functionality.
73

74
## Capabilities
75

76
### Application and Initialization
77

78
Core application setup, canvas management, renderer configuration, and lifecycle control. The Application class provides the main entry point for PixiJS applications.
79

80
```typescript { .api }
81
class Application<R extends Renderer = Renderer> {
82
  constructor(options?: Partial<ApplicationOptions>);
83
  init(options?: Partial<ApplicationOptions>): Promise<void>;
84
  readonly canvas: HTMLCanvasElement;
85
  readonly renderer: R;
86
  readonly stage: Container;
87
  readonly ticker: Ticker;
88
  readonly screen: Rectangle;
89
  destroy(removeView?: boolean, stageOptions?: boolean | DestroyOptions): void;
90
}
91

92
interface ApplicationOptions {
93
  width: number;
94
  height: number;
95
  background: ColorSource;
96
  backgroundAlpha: number;
97
  resolution: number;
98
  antialias: boolean;
99
  autoDensity: boolean;
100
  resizeTo: Window | HTMLElement;
101
  preference: 'webgl' | 'webgpu';
102
}
103
```
104

105
[Application and Initialization](./application.md)
106

107
### Display Objects and Scene Graph
108

109
Hierarchical display object system including containers, sprites, graphics, text, meshes, particles, and specialized display objects. The scene graph provides transform inheritance and rendering order.
110

111
```typescript { .api }
112
class Container<C extends ContainerChild = ContainerChild> {
113
  constructor();
114
  addChild<U extends ContainerChild[]>(...children: U): U[0];
115
  removeChild<U extends ContainerChild>(...children: U[]): U[0];
116
  getChildAt(index: number): ContainerChild;
117
  readonly children: ContainerChild[];
118
  readonly parent: Container;
119
  x: number;
120
  y: number;
121
  scale: PointData;
122
  rotation: number;
123
  alpha: number;
124
  visible: boolean;
125
}
126

127
class Sprite extends Container {
128
  constructor(texture?: Texture);
129
  texture: Texture;
130
  anchor: ObservablePoint;
131
  tint: ColorSource;
132
  blendMode: BLEND_MODES;
133
}
134
```
135

136
[Display Objects and Scene Graph](./display-objects.md)
137

138
### Graphics and Drawing
139

140
Vector graphics drawing API for creating shapes, paths, fills, and strokes. Supports SVG path commands, gradients, patterns, and complex shapes.
141

142
```typescript { .api }
143
class Graphics extends Container {
144
  constructor(context?: GraphicsContext);
145
  rect(x: number, y: number, width: number, height: number): this;
146
  circle(x: number, y: number, radius: number): this;
147
  ellipse(x: number, y: number, halfWidth: number, halfHeight: number): this;
148
  poly(points: PointData[] | number[]): this;
149
  fill(style?: FillInput): this;
150
  stroke(style?: StrokeInput): this;
151
  clear(): this;
152
}
153

154
class GraphicsContext {
155
  rect(x: number, y: number, width: number, height: number): this;
156
  roundRect(x: number, y: number, width: number, height: number, radius: number): this;
157
  circle(x: number, y: number, radius: number): this;
158
  moveTo(x: number, y: number): this;
159
  lineTo(x: number, y: number): this;
160
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this;
161
  closePath(): this;
162
}
163
```
164

165
[Graphics and Drawing](./graphics.md)
166

167
### Text Rendering
168

169
Comprehensive text rendering system supporting canvas-based text, bitmap fonts, andHTML text with CSS styling. Includes font loading, text metrics, and advanced text features.
170

171
```typescript { .api }
172
class Text extends Container {
173
  constructor(options?: TextOptions);
174
  text: string;
175
  style: TextStyle;
176
}
177

178
class BitmapText extends Container {
179
  constructor(options?: BitmapTextOptions);
180
  text: string;
181
  readonly textWidth: number;
182
  readonly textHeight: number;
183
}
184

185
class HTMLText extends Container {
186
  constructor(options?: HTMLTextOptions);
187
  text: string;
188
  style: HTMLTextStyle;
189
}
190
```
191

192
[Text Rendering](./text.md)
193

194
### Asset Loading and Management
195

196
Comprehensive asset loading system supporting textures, fonts, JSON, and custom formats. Includes caching, URL resolution, progress tracking, and background loading.
197

198
```typescript { .api }
199
class Assets {
200
  static load<T = any>(urls: string | string[]): Promise<T>;
201
  static add(aliases: string | AssetInitOptions | (string | AssetInitOptions)[]): void;
202
  static get<T = any>(keys: string): T;
203
  static unload(urls: string | string[]): Promise<void>;
204
  static readonly cache: Cache;
205
  static readonly resolver: Resolver;
206
  static readonly loader: Loader;
207
}
208

209
class Loader {
210
  add(name: string | LoaderParser[], url?: string, options?: LoadAsset): this;
211
  load<T>(urls?: string | string[], onProgress?: ProgressCallback): Promise<T>;
212
  reset(): this;
213
}
214
```
215

216
[Asset Loading and Management](./assets.md)
217

218
### Textures and Materials
219

220
Texture creation, management, and manipulation including texture sources, render textures, texture atlases, and texture optimization.
221

222
```typescript { .api }
223
class Texture {
224
  constructor(options?: TextureOptions);
225
  readonly source: TextureSource;
226
  frame: Rectangle;
227
  trim: Rectangle;
228
  rotate: number;
229
  static from(source: TextureSourceLike, options?: TextureOptions): Texture;
230
  static fromURL(url: string, options?: TextureOptions): Promise<Texture>;
231
  static readonly EMPTY: Texture;
232
  static readonly WHITE: Texture;
233
}
234

235
class RenderTexture extends Texture {
236
  constructor(options?: RenderTextureOptions);
237
  resize(width: number, height: number, resolution?: number): void;
238
}
239
```
240

241
[Textures and Materials](./textures.md)
242

243
### Rendering and Performance
244

245
WebGL and WebGPU rendering backends, batching system, geometry management, shaders, and performance optimization utilities.
246

247
```typescript { .api }
248
class WebGLRenderer extends AbstractRenderer {
249
  constructor(options?: WebGLRendererOptions);
250
  render(container: Container, options?: RenderOptions): void;
251
}
252

253
class WebGPURenderer extends AbstractRenderer {
254
  constructor(options?: WebGPURendererOptions);
255
  render(container: Container, options?: RenderOptions): void;
256
}
257

258
function autoDetectRenderer(options?: RendererOptions): Promise<WebGLRenderer | WebGPURenderer>;
259

260
class Batcher {
261
  addToBatch(batchableObject: Batchable): void;
262
  break(instructionSet: InstructionSet): void;
263
  finish(instructionSet: InstructionSet): void;
264
}
265
```
266

267
[Rendering and Performance](./rendering.md)
268

269
### Filters and Effects
270

271
Visual effects system including built-in filters (blur, color matrix, displacement) and custom filter creation with shader support.
272

273
```typescript { .api }
274
class Filter {
275
  constructor(options?: FilterOptions);
276
  apply(filterManager: FilterSystem, input: RenderTarget, output: RenderTarget, clearMode?: CLEAR_MODES): void;
277
  blendMode: BLEND_MODES;
278
  enabled: boolean;
279
  padding: number;
280
}
281

282
class BlurFilter extends Filter {
283
  constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
284
  blur: number;
285
  quality: number;
286
  blurX: number;
287
  blurY: number;
288
}
289

290
class ColorMatrixFilter extends Filter {
291
  constructor(matrix?: number[]);
292
  matrix: number[];
293
  alpha: number;
294
}
295
```
296

297
[Filters and Effects](./filters.md)
298

299
### Events and Interaction
300

301
Event system supporting mouse, touch, and pointer interactions with event bubbling, hit testing, and custom event handling.
302

303
```typescript { .api }
304
class FederatedEvent {
305
  constructor(manager: EventBoundary);
306
  readonly type: string;
307
  readonly target: FederatedEventTarget;
308
  readonly currentTarget: FederatedEventTarget;
309
  readonly timeStamp: number;
310
  stopPropagation(): void;
311
  stopImmediatePropagation(): void;
312
  preventDefault(): void;
313
}
314

315
class FederatedPointerEvent extends FederatedEvent {
316
  readonly pointerId: number;
317
  readonly width: number;
318
  readonly height: number;
319
  readonly isPrimary: boolean;
320
  readonly pointerType: string;
321
  readonly pressure: number;
322
  getLocalPosition(displayObject: Container, point?: Point): Point;
323
  getGlobalPosition(point?: Point): Point;
324
}
325
```
326

327
[Events and Interaction](./events.md)
328

329
### Animation and Ticker
330

331
Animation system with frame-rate independent timing, ticker management, and sprite animation utilities.
332

333
```typescript { .api }
334
class Ticker {
335
  constructor();
336
  add(fn: TickerCallback, context?: any, priority?: number): this;
337
  remove(fn: TickerCallback, context?: any): this;
338
  start(): void;
339
  stop(): void;
340
  readonly deltaTime: number;
341
  readonly elapsedMS: number;
342
  readonly FPS: number;
343
  speed: number;
344
}
345

346
class AnimatedSprite extends Sprite {
347
  constructor(textures: Texture[] | FrameObject[], autoUpdate?: boolean);
348
  textures: Texture[] | FrameObject[];
349
  currentFrame: number;
350
  animationSpeed: number;
351
  loop: boolean;
352
  play(): void;
353
  stop(): void;
354
  gotoAndPlay(frameNumber: number): void;
355
  gotoAndStop(frameNumber: number): void;
356
}
357
```
358

359
[Animation and Ticker](./animation.md)
360

361
### Mathematics and Geometry
362

363
Mathematical primitives including points, rectangles, circles, matrices, and shape utilities for calculations and transformations.
364

365
```typescript { .api }
366
class Point {
367
  constructor(x?: number, y?: number);
368
  x: number;
369
  y: number;
370
  clone(): Point;
371
  copyFrom(p: PointData): this;
372
  copyTo<T extends PointLike>(p: T): T;
373
  equals(p: PointData): boolean;
374
  set(x?: number, y?: number): this;
375
}
376

377
class Rectangle {
378
  constructor(x?: number, y?: number, width?: number, height?: number);
379
  x: number;
380
  y: number;
381
  width: number;
382
  height: number;
383
  readonly left: number;
384
  readonly right: number;
385
  readonly top: number;
386
  readonly bottom: number;
387
  contains(x: number, y: number): boolean;
388
  intersects(other: Rectangle): boolean;
389
}
390

391
class Matrix {
392
  constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
393
  a: number;
394
  b: number;
395
  c: number;
396
  d: number;
397
  tx: number;
398
  ty: number;
399
  clone(): Matrix;
400
  set(a: number, b: number, c: number, d: number, tx: number, ty: number): this;
401
  apply(pos: PointData, newPos?: Point): Point;
402
  translate(x: number, y: number): this;
403
  scale(x: number, y: number): this;
404
  rotate(angle: number): this;
405
  invert(): this;
406
}
407
```
408

409
[Mathematics and Geometry](./math.md)
410

411
### Utilities and Helpers
412

413
Browser detection, color management, utility functions, debugging tools, and performance optimization helpers.
414

415
```typescript { .api }
416
class Color {
417
  constructor(value?: ColorSource);
418
  readonly value: number;
419
  readonly alpha: number;
420
  setValue(value: ColorSource): this;
421
  setAlpha(alpha: number): this;
422
  toHex(): string;
423
  toRgba(): [number, number, number, number];
424
  toHsl(): [number, number, number];
425
  multiply(value: ColorSource): Color;
426
  static isColorLike(value: any): value is ColorSource;
427
}
428

429
function isMobile(): boolean;
430
function isWebGLSupported(): boolean;
431
function isWebGPUSupported(): boolean;
432
function uid(): number;
433
```
434

435
[Utilities and Helpers](./utils.md)