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 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;


You will get this :


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



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.