pixi.js
    Preparing search index...

    Interface ApplicationOptions

    Application options supplied to the Application#init method. These options configure how your PixiJS application behaves.

    import { Application } from 'pixi.js';

    const app = new Application();

    // Initialize with common options
    await app.init({
       // Rendering options
       width: 800,                    // Canvas width
       height: 600,                   // Canvas height
       backgroundColor: 0x1099bb,     // Background color
       antialias: true,              // Enable antialiasing
       resolution: window.devicePixelRatio, // Screen resolution

       // Performance options
       autoStart: true,              // Auto-starts the render loop
       sharedTicker: true,           // Use shared ticker for better performance

       // Automatic resize options
       resizeTo: window,             // Auto-resize to window
       autoDensity: true,           // Adjust for device pixel ratio

       // Advanced options
       preference: 'webgl',         // Renderer preference ('webgl' or 'webgpu')
       powerPreference: 'high-performance' // GPU power preference
    });
    interface ApplicationOptions {
        antialias?: boolean;
        autoDensity?: boolean;
        autoStart?: boolean;
        background?: ColorSource;
        backgroundAlpha?: number;
        backgroundColor: ColorSource;
        bezierSmoothness: number;
        canvas?: ICanvas;
        clearBeforeRender?: boolean;
        context: WebGL2RenderingContext;
        depth?: boolean;
        eventFeatures?: Partial<EventSystemFeatures>;
        eventMode?: EventMode;
        failIfMajorPerformanceCaveat?: boolean;
        forceFallbackAdapter: boolean;
        height?: number;
        hello: boolean;
        manageImports?: boolean;
        multiView: boolean;
        powerPreference?: GpuPowerPreference;
        preference?: "webgl" | "webgpu";
        preferWebGLVersion?: 1 | 2;
        premultipliedAlpha: boolean;
        preserveDrawingBuffer: boolean;
        renderableGCActive: boolean;
        renderableGCFrequency: number;
        renderableGCMaxUnusedTime: number;
        resizeTo?: HTMLElement | Window;
        resolution?: number;
        roundPixels?: boolean;
        sharedTicker?: boolean;
        skipExtensionImports?: boolean;
        textureGCActive: boolean;
        textureGCAMaxIdle: number;
        textureGCCheckCountMax: number;
        textureGCMaxIdle: number;
        useBackBuffer?: boolean;
        view?: ICanvas;
        webgl?: Partial<WebGLOptions>;
        webgpu?: Partial<WebGPUOptions>;
        width?: number;
    }

    Hierarchy (View Summary)

    Index

    Properties

    antialias? autoDensity? autoStart? background? backgroundAlpha? backgroundColor bezierSmoothness canvas? clearBeforeRender? context depth? eventFeatures? eventMode? failIfMajorPerformanceCaveat? forceFallbackAdapter height? hello manageImports? multiView powerPreference? preference? preferWebGLVersion? premultipliedAlpha preserveDrawingBuffer renderableGCActive renderableGCFrequency renderableGCMaxUnusedTime resizeTo? resolution? roundPixels? sharedTicker? skipExtensionImports? textureGCActive textureGCAMaxIdle textureGCCheckCountMax textureGCMaxIdle useBackBuffer? view? webgl? webgpu? width?

    Properties

    antialias?: boolean

    Whether to enable anti-aliasing. This may affect performance.

    autoDensity?: boolean

    Resizes renderer view in CSS pixels to allow for resolutions other than 1.

    This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.

    autoStart?: boolean

    Controls whether the animation loop starts automatically after initialization.

    Important

    Setting this to false does NOT stop the shared ticker even if sharedTicker is true. You must stop the shared ticker manually if needed.

    // Auto-start (default behavior)
    await app.init({ autoStart: true });

    // Manual start
    await app.init({ autoStart: false });
    app.start(); // Start when ready

    true
    background?: ColorSource

    Alias for backgroundColor

    backgroundAlpha?: number

    Transparency of the background color, value from 0 (fully transparent) to 1 (fully opaque). This value determines whether the canvas is initialized with alpha transparency support. Note: This cannot be changed after initialization. If set to 1, the canvas will remain opaque, even if a transparent background color is set later.

    1
    backgroundColor: ColorSource

    The background color used to clear the canvas. See ColorSource for accepted color values.

    'black'
    bezierSmoothness: number

    A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)

    0.5
    canvas?: ICanvas

    The canvas to use as a view, optional.

    clearBeforeRender?: boolean

    Whether to clear the canvas before new render passes.

    true
    context: WebGL2RenderingContext

    User-provided WebGL rendering context object.

    null
    depth?: boolean

    Whether to ensure the main view has can make use of the depth buffer. Always true for WebGL renderer.

    eventFeatures?: Partial<EventSystemFeatures>

    Configuration for enabling/disabling specific event features. Use this to optimize performance by turning off unused functionality.

    const app = new Application();
    await app.init({
        eventFeatures: {
            // Core interaction events
            move: true,        // Pointer/mouse/touch movement
            click: true,       // Click/tap events
            wheel: true,       // Mouse wheel/scroll events
            // Global tracking
            globalMove: false  // Global pointer movement
        }
    });

    7.2.0

    eventMode?: EventMode

    The type of interaction behavior for a Container. This is set via the Container#eventMode property.

    // Basic event mode setup
    const sprite = new Sprite(texture);
    sprite.eventMode = 'static';    // Enable standard interaction
    sprite.on('pointerdown', () => { console.log('clicked!'); });

    // Different event modes
    sprite.eventMode = 'none';      // Disable all interaction
    sprite.eventMode = 'passive';   // Only allow interaction on children
    sprite.eventMode = 'auto';      // Like DOM pointer-events: auto
    sprite.eventMode = 'dynamic';   // For moving/animated objects

    Available modes:

    • 'none': Ignores all interaction events, even on its children
    • 'passive': (default) Does not emit events and ignores hit testing on itself and non-interactive children. Interactive children will still emit events.
    • 'auto': Does not emit events but is hit tested if parent is interactive. Same as interactive = false in v7
    • 'static': Emit events and is hit tested. Same as interactive = true in v7
    • 'dynamic': Emits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving

    Performance tips:

    • Use 'none' for pure visual elements
    • Use 'passive' for containers with some interactive children
    • Use 'static' for standard buttons/controls
    • Use 'dynamic' only for moving/animated interactive elements

    7.2.0

    failIfMajorPerformanceCaveat?: boolean
    forceFallbackAdapter: boolean

    Force the use of the fallback adapter

    false
    height?: number

    The height of the screen.

    600
    hello: boolean

    Whether to log the version and type information of renderer to console.

    false
    manageImports?: boolean
    true

    since 8.1.6

    skipExtensionImports

    multiView: boolean

    Whether to enable multi-view rendering. Set to true when rendering to multiple canvases on the dom.

    false
    powerPreference?: GpuPowerPreference

    An optional hint indicating what configuration of GPU is suitable for the WebGL context, can be 'high-performance' or 'low-power'. Setting to 'high-performance' will prioritize rendering performance over power consumption, while setting to 'low-power' will prioritize power saving over rendering performance.

    undefined
    preference?: "webgl" | "webgpu"

    The preferred renderer type. WebGPU is recommended as its generally faster than WebGL.

    preferWebGLVersion?: 1 | 2

    The preferred WebGL version to use.

    2
    premultipliedAlpha: boolean

    Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.

    true
    preserveDrawingBuffer: boolean

    Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call toDataUrl on the WebGL context.

    false
    renderableGCActive: boolean

    If set to true, this will enable the garbage collector on the GPU.

    true
    renderableGCFrequency: number

    Frames between two garbage collections.

    600
    renderableGCMaxUnusedTime: number

    The maximum idle frames before a texture is destroyed by garbage collection.

    60 * 60
    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
    resolution?: number

    The resolution / device pixel ratio of the renderer.

    roundPixels?: boolean
    sharedTicker?: boolean

    Controls whether to use the shared global ticker or create a new instance.

    The shared ticker is useful when you have multiple instances that should sync their updates. However, it has some limitations regarding update order control.

    Update Order:

    1. System ticker (always runs first)
    2. Shared ticker (if enabled)
    3. App ticker (if using own ticker)
    // Use shared ticker (global instance)
    await app.init({ sharedTicker: true });

    // Use dedicated ticker (default)
    await app.init({ sharedTicker: false });

    // Access ticker properties
    console.log(app.ticker.FPS);    // Current FPS
    console.log(app.ticker.deltaMS); // MS since last update

    false
    skipExtensionImports?: boolean

    Whether to stop PixiJS from dynamically importing default extensions for the renderer. It is false by default, and means PixiJS will load all the default extensions, based on the environment e.g browser/webworker. If you set this to true, then you will need to manually import the systems and extensions you need.

    e.g.

    import 'accessibility';
    import 'app';
    import 'events';
    import 'spritesheet';
    import 'graphics';
    import 'mesh';
    import 'text';
    import 'text-bitmap';
    import 'text-html';
    import { autoDetectRenderer } from 'pixi.js';

    const renderer = await autoDetectRenderer({
      width: 800,
      height: 600,
      skipExtensionImports: true,
    });

    false
    textureGCActive: boolean

    If set to true, this will enable the garbage collector on the GPU.

    true
    textureGCAMaxIdle: number

    since 8.3.0

    TextureGCSystemOptions.textureGCMaxIdle

    textureGCCheckCountMax: number

    Frames between two garbage collections.

    600
    textureGCMaxIdle: number

    The maximum idle frames before a texture is destroyed by garbage collection.

    60 * 60
    useBackBuffer?: boolean

    if true will use the back buffer where required

    false
    view?: ICanvas

    Alias for canvas.

    since 8.0.0

    webgl?: Partial<WebGLOptions>

    Optional WebGLOptions to pass only to the WebGL renderer

    webgpu?: Partial<WebGPUOptions>

    Optional WebGPUOptions to pass only to WebGPU renderer.

    width?: number

    The width of the screen.

    800

    Settings

    Member Visibility

    On This Page

    Properties