Capture Global Pointer Events on Pixi.js Stage

This article explains how to capture global pointer events—such as clicks, taps, and mouse movements—anywhere on the background canvas stage in Pixi.js. By default, the root stage does not register interaction events on empty background areas. You will learn how to enable interactivity and define a hit area on the stage container to successfully capture these inputs across the entire canvas.

To capture pointer events on the background of your Pixi.js application, you must configure the root stage to act as an interactive element that spans the entire screen. By default, the stage only triggers events if a user interacts directly with an active child sprite or graphic.

Here are the three steps required to make the entire background stage interactive:

1. Set the Stage Event Mode

In Pixi.js (v7 and v8), you must set the eventMode property of the stage to 'static'. This tells the interaction manager that the stage container should actively listen for user input.

app.stage.eventMode = 'static';

(Note: If you are using Pixi.js v6 or older, use app.stage.interactive = true; instead).

2. Define the Stage Hit Area

Because the stage container itself has no visual boundaries, you must explicitly define its hitArea. Assigning the application’s screen rectangle to the stage’s hitArea ensures that the entire canvas area registers pointer events, even in empty spaces where no sprites are rendered.

app.stage.hitArea = app.screen;

3. Register the Pointer Event Listeners

Once the event mode and hit area are configured, you can bind standard Pixi.js pointer event listeners directly to the stage. Using 'pointerdown', 'pointerup', or 'pointermove' ensures compatibility with both mouse and touch devices.

app.stage.on('pointerdown', (event) => {
    // Obtain the global coordinates of the click or tap
    const { x, y } = event.global;
    console.log(`Global pointer click detected at coordinate: X: ${x}, Y: ${y}`);
});

Complete Implementation Example

Below is a complete, minimal implementation demonstrating how to set up the application and log background click coordinates to the console:

import { Application } from 'pixi.js';

async function init() {
    const app = new Application();
    await app.init({ width: 800, height: 600, backgroundColor: 0x1099bb });
    document.body.appendChild(app.canvas);

    // Make the background stage interactive
    app.stage.eventMode = 'static';
    app.stage.hitArea = app.screen;

    // Listen for global click/tap events on the background
    app.stage.on('pointerdown', (event) => {
        console.log('Background clicked at:', event.global.x, event.global.y);
    });
}

init();