CODEWITHSUNDEEP
pixi.js
basickarl
basickarl

Reputation: 40454

How to get a 1px line

I've looked at the examples:

http://pixijs.io/examples/#/basics/graphics.js

const app = new PIXI.Application(10, 10), {
    antialias: true,
    backgroundColor: 0xffffff,
});
const graphics = new PIXI.Graphics(true); // <- native lines http://pixijs.download/dev/docs/PIXI.Graphics.html#Graphics
graphics.lineStyle(1, 0xffffff, 1);
graphics.moveTo(0, 0);
graphics.lineTo(10, 10);
graphics.endFill();
app.stage.addChild(graphics);

This creates a 2px wide line. I'm wondering If I need to create a graphics with the TRIANGLE_STRIP instead and set the four corners of the line instead. Surely there must be an easy way of fixing this?

Upvotes: 0

Views: 1113

Answers (1)

basickarl
basickarl

Reputation: 40454

https://github.com/pixijs/pixi.js/issues/243

Seems that it's a general bug with the canvas in Chrome. Waaa.

Which means it's related to Drawing a 1px thick line in canvas creates a 2px thick line

Answer: https://stackoverflow.com/a/13879402/1137669

Add 0.5 to the position. So:

graphics.moveTo(0.5, 0.5);
graphics.lineTo(10.5, 10.5);

Upvotes: 1

Related Questions