How to fix blurry/jagged text in PixiJS
Nassim
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 :
compared to what you would have if you didn't add the properties mentioned above :
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.