pixi.graphics PIXI Graphics are not sharp

[Ravindu89]

I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. 

Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. 

   const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height,
            {view: canvas, antialias: true, transparent: false, resolution: 1});

      
        renderer.view.style.position = 'relative';
        renderer.view.style.display = 'block';
        renderer.autoResize = true;
        renderer.backgroundColor = 0xFFFFFF;

Area Chart Style

Candle Chart Style

Would like to hear any advice on the subject.

Thanks in advance!

[ivan.popelyshev]

Do you struggle with half-integer coords? If you make 1-pixel line from (0,0) to (10,10) it will be blurry. Guess why.

Also there's a boolean parameter in Graphics constructor. Try it

[Ravindu89]

Thank you for your quick reply,

I instantiate Graphics constructor like below, 

new PIXI.Graphics(true);

Yes, I am working with half-integers. but I didn't get what you mean in above that 1-pixel line will be blurry.  Could you explain more about this topic?

 

 

[ivan.popelyshev]

(0,0) is the corner of the pixel, (0.5, 0.5) is its center. If you make a line of width1 from (0,0) to (10,0) it will take 20 pixels: 10 left with alpha=0.5 and 10 right with alpha=0.5 because of antialiasing.

[enns]

what to do when using fonts? they are also not sharp.

[ivan.popelyshev]

2 hours ago, enns said:

what to do when using fonts? they are also not sharp.

roundPixels might help

[Ravindu89]

On 1/29/2021 at 9:52 PM, enns said:

what to do when using fonts? they are also not sharp.

xLbl = new PIXI.Text(txt, xPointsTextStyle);
xLbl.position.set(Math.round(xMajorPos), Math.rount(yMajorPos));

 

I think this will helpful. Don't use half integer pixels when drawing objects.