pixi.js
    Preparing search index...

    Class Application<R>

    Convenience class to create a new PixiJS application.

    The Application class is the main entry point for creating a PixiJS application. It handles the setup of all core components needed to start rendering and managing your game or interactive experience.

    Key features:

    • Automatically creates and manages the renderer
    • Provides a stage (root container) for your display objects
    • Handles canvas creation and management
    • Supports plugins for extending functionality 
    import { Assets, Application, Sprite } from 'pixi.js';

    // Create a new application
    const app = new Application();

    // Initialize with options
    await app.init({
        width: 800,           // Canvas width
        height: 600,          // Canvas height
        backgroundColor: 0x1099bb, // Background color
        antialias: true,     // Enable antialiasing
        resolution: 1,       // Resolution / device pixel ratio
        preference: 'webgl', // or 'webgpu' // Renderer preference
    });

    // Add the canvas to your webpage
    document.body.appendChild(app.canvas);

    // Start adding content to your application
    const texture - await Assets.load('your-image.png');
    const sprite = new Sprite(texture);
    app.stage.addChild(sprite);
    Important

    From PixiJS v8.0.0, the application must be initialized using the async init() method rather than passing options to the constructor.

    Type Parameters

    Hierarchy

    • Application
      • Application
    Index

    Properties

    renderer resizeTo stage ticker

    Accessors

    canvas screen view

    Methods

    cancelResize destroy init queueResize render resize start stop

    Properties

    renderer: R

    The renderer instance that handles all drawing operations.

    Unless specified, it will automatically create a WebGL renderer if available. If WebGPU is available and the preference is set to webgpu, it will create a WebGPU renderer.

    // Create a new application
    const app = new Application();
    await app.init({
        width: 800,
        height: 600,
        preference: 'webgl', // or 'webgpu'
    });

    // Access renderer properties
    console.log(app.renderer.width, app.renderer.height);
    resizeTo: HTMLElement | Window

    Element to automatically resize the renderer to.

    const app = new Application();
    await app.init({
        resizeTo: window, // Resize to the entire window
        // or
        resizeTo: document.querySelector('#game-container'), // Resize to a specific element
        // or
        resizeTo: null, // Disable auto-resize
    });

    null
    stage: Container = ...

    The root display container for your application. All visual elements should be added to this container or its children.

    // Create a sprite and add it to the stage
    const sprite = Sprite.from('image.png');
    app.stage.addChild(sprite);

    // Create a container for grouping objects
    const container = new Container();
    app.stage.addChild(container);
    ticker: Ticker

    The application's ticker instance that manages the update/render loop.

    // Basic animation
    app.ticker.add((ticker) => {
        sprite.rotation += 0.1 * ticker.deltaTime;
    });

    // Control update priority
    app.ticker.add(
        (ticker) => {
            // Physics update (runs first)
        },
        undefined,
        UPDATE_PRIORITY.HIGH
    );

    // One-time update
    app.ticker.addOnce(() => {
        console.log('Runs next frame only');
    });

    // Access timing info
    console.log(app.ticker.FPS);      // Current FPS
    console.log(app.ticker.deltaTime); // Scaled time delta
    console.log(app.ticker.deltaMS);   // MS since last update

    Accessors

    • get canvas(): R["canvas"]

      Reference to the renderer's canvas element. This is the HTML element that displays your application's graphics.

      Returns R["canvas"]

      // Create a new application
      const app = new Application();
      // Initialize the application
      await app.init({...});
      // Add canvas to the page
      document.body.appendChild(app.canvas);

      // Access the canvas directly
      console.log(app.canvas); // HTMLCanvasElement
    • get screen(): Rectangle

      Reference to the renderer's screen rectangle. This represents the visible area of your application.

      It's commonly used for:

      • Setting filter areas for full-screen effects
      • Defining hit areas for screen-wide interaction
      • Determining the visible bounds of your application

      Returns Rectangle

      // Use as filter area for a full-screen effect
      const blurFilter = new BlurFilter();
      sprite.filterArea = app.screen;

      // Use as hit area for screen-wide interaction
      const screenSprite = new Sprite();
      screenSprite.hitArea = app.screen;

      // Get screen dimensions
      console.log(app.screen.width, app.screen.height);

      Rectangle For all available properties and methods

    • get view(): R["canvas"]

      Reference to the renderer's canvas element.

      Returns R["canvas"]

      since 8.0.0

      Application#canvas

    Methods

    • Cancel any pending resize operation that was queued with queueResize().

      Returns void

      • Clears the resize operation queued for next frame
      // Queue a resize
      app.queueResize();

      // Cancel if needed
      app.cancelResize();

    • Destroys the application and all of its resources.

      This method should be called when you want to completely clean up the application and free all associated memory.

      Parameters

      • rendererDestroyOptions: RendererDestroyOptions = false

        Options for destroying the renderer:

        • false or undefined: Preserves the canvas element (default)
        • true: Removes the canvas element
        • { removeView: boolean }: Object with removeView property to control canvas removal
      • options: DestroyOptions = false

        Options for destroying the application:

        • false or undefined: Basic cleanup (default)
        • true: Complete cleanup including children
        • Detailed options object:
          • children: Remove children
          • texture: Destroy textures
          • textureSource: Destroy texture sources
          • context: Destroy WebGL context

      Returns void

      // Basic cleanup
      app.destroy();

      // Remove canvas and do complete cleanup
      app.destroy(true, true);

      // Remove canvas with explicit options
      app.destroy({ removeView: true }, true);

      // Detailed cleanup with specific options
      app.destroy(
          { removeView: true },
          {
              children: true,
              texture: true,
              textureSource: true,
              context: true
          }
      );
      Warning

      After calling destroy, the application instance should no longer be used. All properties will be null and further operations will throw errors.

    • Initializes the PixiJS application with the specified options.

      This method must be called after creating a new Application instance.

      Parameters

      Returns Promise<void>

      A promise that resolves when initialization is complete

      const app = new Application();

      // Initialize with custom options
      await app.init({
          width: 800,
          height: 600,
          backgroundColor: 0x1099bb,
          preference: 'webgl', // or 'webgpu'
      });

    • Queue a resize operation for the next animation frame. This method is throttled and optimized for frequent calls.

      Important

      You do not need to call this method manually in most cases. A resize event will be dispatched automatically when the resizeTo element changes size.

      Returns void

      • Safe to call multiple times per frame
      • Only one resize will occur on next frame
      • Cancels any previously queued resize
      app.queueResize(); // Queue for next frame

    • Renders the current stage to the screen.

      When using the default setup with TickerPlugin (enabled by default), you typically don't need to call this method directly as rendering is handled automatically.

      Only use this method if you've disabled the TickerPlugin or need custom render timing control.

      Returns void

      // Example 1: Default setup (TickerPlugin handles rendering)
      const app = new Application();
      await app.init();
      // No need to call render() - TickerPlugin handles it

      // Example 2: Custom rendering loop (if TickerPlugin is disabled)
      const app = new Application();
      await app.init({ autoStart: false }); // Disable automatic rendering

      function animate() {
          app.render();
          requestAnimationFrame(animate);
      }
      animate();

    • Element to automatically resize the renderer to.

      Important

      You do not need to call this method manually in most cases. A resize event will be dispatched automatically when the resizeTo element changes size.

      Returns void

      • Automatically resizes the renderer to match the size of the resizeTo element
      • If resizeTo is null, auto-resizing is disabled
      • If resizeTo is a Window, it resizes to the full window size
      • If resizeTo is an HTMLElement, it resizes to the element's bounding client rectangle
      const app = new Application();
      await app.init({
          resizeTo: window, // Resize to the entire window
          // or
          resizeTo: document.querySelector('#game-container'), // Resize to a specific element
          // or
          resizeTo: null, // Disable auto-resize
      });

      // Manually trigger a resize
      app.resize();

      null

    • Starts the render/update loop.

      Returns void

      // Initialize without auto-start
      await app.init({ autoStart: false });

      // Start when ready
      app.start();

    • Stops the render/update loop.

      Returns void

      // Stop the application
      app.stop();
      // ... custom update logic ...
      app.render(); // Manual render

    Settings

    Member Visibility

    On This Page

    Properties
    Accessors
    Methods