Configure Pixi.js Background Color and Resolution

Setting up a new Pixi.js application requires configuring essential canvas properties to fit your project’s design and performance needs. This article provides a direct, step-by-step guide on how to configure both the background color and the rendering resolution when initializing a Pixi.js application, ensuring your project renders sharply on all screen types and matches your visual theme.

To configure these settings in Pixi.js, you pass a configuration options object during the application initialization process.

Setting the Background Color

The background color of the canvas can be set using the background property (or backgroundColor in older versions). Pixi.js accepts color values as hex color strings (e.g., '#1099bb'), hex numbers (e.g., 0x1099bb), or standard color name strings (e.g., 'blue').

• Hex String: '#1099bb'
• Hex Number: 0x1099bb

Setting the Resolution and Auto-Density

By default, Pixi.js renders at a resolution of 1. On high-DPI (Retina) displays, this can cause the graphics to look blurry. To fix this, you should set the resolution property to match the device’s pixel ratio.

When you increase the resolution, you must also set autoDensity: true. This setting automatically scales the CSS style of the canvas element back down to its designated width and height, keeping the canvas looking crisp without physically expanding its layout size on the web page.

Code Implementation

In modern Pixi.js (v8+), the application is initialized asynchronously using the init() method. Here is how you configure the background color, resolution, and auto-density:

import { Application } from 'pixi.js';

// 1. Create the application instance
const app = new Application();

// 2. Initialize the app with configuration options
await app.init({
    width: 800,
    height: 600,
    background: '#1099bb',                     // Sets the canvas background color
    resolution: window.devicePixelRatio || 1,  // Scales rendering for high-DPI screens
    autoDensity: true,                         // Adjusts CSS to keep canvas elements crisp
});

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

For older versions of Pixi.js (v7 and below), these same options are passed directly into the Application constructor synchronously:

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,                 // Note the property name difference in older versions
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
});

document.body.appendChild(app.view);