How to Initialize a PixiJS Application

This article provides a step-by-step guide on how to initialize a basic PixiJS application instance using the latest industry standards. You will learn how to set up the library, configure the application asynchronously, and mount the rendering canvas to your HTML document to prepare your project for 2D rendering.

Step 1: Import the PixiJS Library

To begin, you need to import the necessary modules from the PixiJS package. In modern JavaScript environments, this is typically done using ES modules.

import { Application } from 'pixi.js';

Alternatively, if you are using a CDN in a plain HTML file, you can access PixiJS via the global PIXI object.

Step 2: Create the Application Instance

In PixiJS (specifically version 8 and newer), initializing an application is an asynchronous process. You first instantiate the Application class, and then call its .init() method.

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

Step 3: Initialize the Application with Configuration

Call the init method to configure your application renderer. This method returns a Promise, so it should be used inside an async function or handled with .then(). You can pass configuration options such as width, height, background color, and resolution.

async function setup() {
    await app.init({
        width: 800,
        height: 600,
        backgroundColor: 0x1099bb,
        antialias: true
    });
}

Step 4: Append the Canvas to the DOM

Once the application is initialized, PixiJS generates a <canvas> element. You must append this element to your HTML document’s body or a specific container so that it is visible on the page.

In modern PixiJS, the canvas element is accessed via app.canvas (in older versions, it was app.view).

// Append the canvas to the HTML body
document.body.appendChild(app.canvas);

Complete Initialization Template

Below is a complete, minimal template demonstrating the standard initialization process in a single workflow:

import { Application, Assets, Sprite } from 'pixi.js';

async function initPixiApp() {
    // 1. Create the application instance
    const app = new Application();

    // 2. Initialize the application with options
    await app.init({ 
        width: 800, 
        height: 600, 
        backgroundColor: 0x1099bb 
    });

    // 3. Append the canvas to the DOM
    document.body.appendChild(app.canvas);

    console.log("PixiJS Application successfully initialized!");
}

initPixiApp();