How to fix blurry/jagged text in PixiJS

An issue I had when making canvas based projects is that I always get slightly blurry/jagged text which is very annoying to deal with. Here is a simple solution to use when working with the PixiJS library.

When creating your PIXI.app add the following to your properties :

const app = new PIXI.Application({
  //...
  antialias: true,
  autoDensity: true,
  resolution: devicePixelRatio
});

Now let's add some text :

const text = new PIXI.Text("Hello, World\n😀", {
  fontSize: 104,
  lineHeight: 28,
  letterSpacing: 0,
  fill: 0xffffff,
  align: "center"
});

text.x = 200;
text.y = 300;

app.stage.addChild(text);

You will get this :

text-clear

compared to what you would have if you didn't add the properties mentioned above :

text-blurry

BONUS

It seems that you can also bump up the resolution of the text by doing text.resolution = 8 //8 is chosen arbitrarly. However didn't seem to notice any change so try it out on your side to see if it has any impact.