0
# Application and Initialization
1

2
Core application setup, canvas management, renderer configuration, and lifecycle control. The Application class provides the main entry point for PixiJS applications with automatic renderer detection and canvas management.
3

4
## Capabilities
5

6
### Application Class
7

8
The main Application class manages the entire PixiJS application lifecycle, including renderer creation, canvas management, and the root stage container.
9

10
```typescript { .api }
11
/**
12
 * Main application class that manages canvas, renderer, stage, and ticker
13
 */
14
class Application<R extends Renderer = Renderer> extends EventEmitter {
15
  constructor(options?: Partial<ApplicationOptions>);
16
  
17
  /**
18
   * Initialize the application with given options
19
   * @param options - Application configuration options
20
   * @returns Promise that resolves when initialization is complete
21
   */
22
  init(options?: Partial<ApplicationOptions>): Promise<void>;
23
  
24
  /** The HTML canvas element */
25
  readonly canvas: HTMLCanvasElement;
26
  
27
  /** The renderer instance (WebGL, WebGPU, or Canvas) */
28
  readonly renderer: R;
29
  
30
  /** The root display object container */
31
  readonly stage: Container;
32
  
33
  /** The application ticker for animations */
34
  readonly ticker: Ticker;
35
  
36
  /** The screen dimensions */
37
  readonly screen: Rectangle;
38
  
39
  /** The view element (alias for canvas) */
40
  readonly view: HTMLCanvasElement;
41
  
42
  /**
43
   * Destroy the application and clean up resources
44
   * @param removeView - Remove the canvas from DOM
45
   * @param stageOptions - Stage destruction options
46
   */
47
  destroy(removeView?: boolean, stageOptions?: boolean | DestroyOptions): void;
48
  
49
  /**
50
   * Resize the application
51
   * @param width - New width
52
   * @param height - New height
53
   */
54
  resize(width?: number, height?: number): void;
55
  
56
  /**
57
   * Render the stage
58
   */
59
  render(): void;
60
}
61
```
62

63
### Application Options
64

65
Configuration options for Application initialization.
66

67
```typescript { .api }
68
interface ApplicationOptions {
69
  /** Width of the canvas */
70
  width: number;
71
  
72
  /** Height of the canvas */
73
  height: number;
74
  
75
  /** Background color */
76
  background: ColorSource;
77
  
78
  /** Background alpha transparency */
79
  backgroundAlpha: number;
80
  
81
  /** Device pixel ratio */
82
  resolution: number;
83
  
84
  /** Enable antialiasing */
85
  antialias: boolean;
86
  
87
  /** Auto adjust resolution based on device */
88
  autoDensity: boolean;
89
  
90
  /** Element to resize to */
91
  resizeTo: Window | HTMLElement;
92
  
93
  /** Renderer preference */
94
  preference: 'webgl' | 'webgpu';
95
  
96
  /** WebGL context options */
97
  context: WebGLContextAttributes;
98
  
99
  /** Canvas element to use */
100
  canvas: HTMLCanvasElement;
101
  
102
  /** PowerPreference for WebGL context */
103
  powerPreference: WebGLPowerPreference;
104
  
105
  /** Premultiplied alpha */
106
  premultipliedAlpha: boolean;
107
  
108
  /** Preserve drawing buffer */
109
  preserveDrawingBuffer: boolean;
110
  
111
  /** Enable hello message */
112
  hello: boolean;
113
}
114
```
115

116
**Usage Examples:**
117

118
```typescript
119
import { Application } from 'pixi.js';
120

121
// Basic application setup
122
const app = new Application();
123
await app.init({
124
  width: 800,
125
  height: 600,
126
  background: '#1099bb'
127
});
128
document.body.appendChild(app.canvas);
129

130
// Responsive application
131
const app = new Application();
132
await app.init({
133
  resizeTo: window,
134
  background: 0x1099bb,
135
  antialias: true
136
});
137

138
// WebGPU preference
139
const app = new Application();
140
await app.init({
141
  preference: 'webgpu',
142
  width: 1024,
143
  height: 768
144
});
145

146
// Custom canvas
147
const canvas = document.getElementById('game-canvas') as HTMLCanvasElement;
148
const app = new Application();
149
await app.init({
150
  canvas,
151
  width: canvas.width,
152
  height: canvas.height
153
});
154
```
155

156
### Application Plugins
157

158
Plugin system for extending Application functionality.
159

160
```typescript { .api }
161
interface ApplicationPlugin {
162
  /** Plugin initialization */
163
  init(options: ApplicationOptions): void;
164
  
165
  /** Plugin destruction */
166
  destroy(): void;
167
}
168

169
class ResizePlugin implements ApplicationPlugin {
170
  /** Resize the application to match element */
171
  resize(): void;
172
  
173
  /** Cancel resize operations */
174
  cancel(): void;
175
}
176

177
class TickerPlugin implements ApplicationPlugin {
178
  /** Start the ticker */
179
  start(): void;
180
  
181
  /** Stop the ticker */
182
  stop(): void;
183
}
184
```
185

186
### Renderer Detection
187

188
Automatic renderer detection and creation utilities.
189

190
```typescript { .api }
191
/**
192
 * Auto-detect the best renderer for the current environment
193
 * @param options - Renderer options
194
 * @returns Promise resolving to the created renderer
195
 */
196
function autoDetectRenderer<T extends Renderer>(options?: RendererOptions): Promise<T>;
197

198
/**
199
 * Check if WebGL is supported
200
 * @returns True if WebGL is supported
201
 */
202
function isWebGLSupported(): boolean;
203

204
/**
205
 * Check if WebGPU is supported
206
 * @returns True if WebGPU is supported
207
 */
208
function isWebGPUSupported(): boolean;
209
```
210

211
### Lifecycle Management
212

213
Application lifecycle events and management.
214

215
```typescript { .api }
216
interface DestroyOptions {
217
  /** Remove children */
218
  children: boolean;
219
  
220
  /** Destroy textures */
221
  texture: boolean;
222
  
223
  /** Destroy base texture */
224
  baseTexture: boolean;
225
}
226

227
// Application events
228
type ApplicationEvents = {
229
  /** Fired when application is resized */
230
  resize: [width: number, height: number];
231
  
232
  /** Fired before render */
233
  prerender: [];
234
  
235
  /** Fired after render */
236
  postrender: [];
237
};
238
```
239

240
**Advanced Usage:**
241

242
```typescript
243
import { Application, Container, Graphics } from 'pixi.js';
244

245
// Application with custom configuration
246
const app = new Application();
247
await app.init({
248
  width: 1200,
249
  height: 800,
250
  background: 0x2c3e50,
251
  resolution: window.devicePixelRatio,
252
  autoDensity: true,
253
  antialias: true,
254
  powerPreference: 'high-performance'
255
});
256

257
// Add event listeners
258
app.renderer.on('resize', (width, height) => {
259
  console.log(`Resized to ${width}x${height}`);
260
});
261

262
// Add to DOM
263
document.body.appendChild(app.canvas);
264

265
// Create scene
266
const container = new Container();
267
const graphics = new Graphics();
268
graphics.rect(0, 0, 100, 100).fill(0xff0000);
269
container.addChild(graphics);
270
app.stage.addChild(container);
271

272
// Start render loop
273
app.ticker.add(() => {
274
  graphics.rotation += 0.01;
275
});
276

277
// Clean up when done
278
window.addEventListener('beforeunload', () => {
279
  app.destroy(true, true);
280
});
281
```