How to Fix Blurry Text in Pixi.js on High-DPI Screens

This article explains why text rendering in Pixi.js applications can appear blurry or pixelated on high-DPI (Retina) screens and provides straightforward, actionable solutions to ensure crisp typography. By adjusting the application’s resolution settings and properly managing text scaling, you can easily resolve these rendering issues and achieve sharp, high-quality text across all devices.

The Cause of Blurry Text

The primary cause of blurry text in Pixi.js on high-DPI screens is a mismatch between the canvas’s drawing buffer size and the physical pixels of the display. By default, Pixi.js may render at a resolution scale of 1, meaning one canvas pixel corresponds to one CSS pixel.

On high-DPI screens, the device pixel ratio (DPR) is typically 2 or higher. When the browser stretches a low-resolution canvas to fill a high-DPI display, it interpolates the pixels, resulting in fuzzy images and blurry text.

Solution 1: Configure Resolution and AutoDensity

The most effective way to fix this issue is to configure your Pixi.js application to detect and use the device’s actual pixel ratio. You can do this by setting the resolution and autoDensity properties during initialization.

For Pixi.js v7 and v8, configure your application like this:

const app = new PIXI.Application();

await app.init({
    width: 800,
    height: 600,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
});

• resolution: Setting this to window.devicePixelRatio tells Pixi.js to scale the backing store of the canvas to match the screen’s actual physical pixel density.
• autoDensity: This instructs Pixi.js to scale the canvas element’s CSS size back down to the specified width and height, preventing the canvas from physically expanding on the screen while maintaining the extra pixels internally for sharpness.

Solution 2: Avoid Scaling Text Objects

Scaling a PIXI.Text object using its scale property (e.g., text.scale.set(2)) causes Pixi.js to stretch the rendered texture, which results in pixelation and blurriness.

To make text larger, always increase the fontSize in the text style instead of scaling the object:

// Avoid this:
const text = new PIXI.Text({ text: 'Hello World', style: { fontSize: 16 } });
text.scale.set(2); // This will cause blurriness

// Do this instead:
const sharpText = new PIXI.Text({ text: 'Hello World', style: { fontSize: 32 } });

If you must scale a container containing text, consider rendering the text at a larger font size first, and then scaling the container down. This ensures the source texture has enough resolution to remain sharp.

Solution 3: Use BitmapText for Complex Scaling

If your project requires dynamic zooming or heavy scaling animations, standard PIXI.Text may struggle with performance or clarity. In these cases, use PIXI.BitmapText.

Bitmap text uses a pre-rendered texture atlas of characters. When generated at a high resolution, bitmap fonts can be scaled much more efficiently and retain better visual fidelity during transitions than standard canvas-rendered text.