Why don't these lines have the same thickness? PIXI.JS - pixi.js

Question

Let me ask you a question about PIXI.js. In Chrome, these lines looks like not the same thickness, but its the same Graphics API (lineTo, moveTo). Why is that?
let boxW = 46.5;
this.leftBox
.lineStyle(1, 0x000,1)
.beginFill(0xffffff)
.moveTo(0, 0)
.lineTo(465, 0)
.lineTo(465, 465)
.lineTo(0, 465)
.lineTo(0, 0)
.endFill();
for (let i = 1; i <= 9; i++) {
this.leftBox.moveTo(boxW * i, 0).lineTo(boxW * i, 465);
}

Answer 1

PAEz is right, it is likely anti aliasing.
When you create you Application anti-aliasing is turned off by default.
Try the below and see if it helps:
const app = new PIXI.Application({
'antialias': true,
'resolution': 2 // This may help too
});
// Add the view to the DOM
document.body.appendChild(app.view);
// ... your line code
The documentation for the Application class and its options can be found here:
https://pixijs.download/dev/docs/PIXI.Application.html
As a side note, PIXI is very fast but as your application scales anti-aliasing and resolution may have performance implications.
Finally to answer your question about what anti-aliasing is, in short, its a way to smooth out jagged edges on non-rectangular shapes, though you have a series lines it could help with your situation too. Here is an article that can tell you more: https://www.gamingscan.com/what-is-anti-aliasing/