PIXI.js how to stop PIXI.Graphics being blurry?

Question

I have a PIXI.Graphics object where I add 9 times a 16x16 texture, then I upscale, but the result is very blurry. Code :

const graphics: PIXI.Graphics = new PIXI.Graphics();
const slotTexture: PIXI.Texture = game.textureManager.getTexture('hotBarSlot'); 
graphics.beginTextureFill({
    texture: slotTexture,
});
graphics.drawRect(0, 0, width * 16, height * 16);
graphics.endFill();
graphics.scale.set(6, 6);

There is the result I get :

This is my texture (it's really small) :

How can I fix this problem ?

Answer 1

Okay, I figure it out!

I have to add this line :

slotTexture.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;