Lines are skewed, have sharp edges or totally disappear

[TimHaerkens]

Expected Behavior

Lines displaying as straight lines.

Current Behavior

Some lines display like straight lines but many other display as morphed polygon-like shapes like the corners of the line are swapped, which make them have a cut-off, have sharp edges, or totally disappear.

Screenshot: https://imgur.com/a/UNDZp9V In the first screenshot I marked the badly behaving lines and the rest is how I would like them to behave. In the second screenshot I lot of lines are morphed and a few lines are correct at the right middle and the left lower corner. Also when I move the canvas (while dragging the map), the wrong lines movement is a bit off. i.e. the correct lines move accordingly with the canvas but the wrong lines have a random offset every time I move the canvas a bit

Animated GIF: https://gyazo.com/262bfddf5ccc9db4d8ca90dba4400b37 Here you can see if I move the canvas, the wrong lines move with a seemingly random offset and the correct lines move accordingly with the canvas.

Possible Solution

I'm not sure but I would like to know what makes the difference between a skewed line and a correctly behaving line. I would gladly appreciate any input.

Steps to Reproduce

I've been using Pixi Sprites for map markers for a long time without any problem. But Pixi lines have had problem since the beginning. I add them to the container with this code:

let invScale = 1 / pixiLayer.utils.getScale();
let scaleMultiplier = Math.max(0.4, Math.min((0.4 + ((utils.getMap().getZoom() - 12) / 8)), 1.5));

let markerLine = new PIXI.Graphics(); 
markerLine.lineStyle(1 * invScale * scaleMultiplier, 0x3388ff, 1);
info.position.coordinates.forEach(function(point,index){
      point = utils.latLngToLayerPoint([point[0], point[1]]);
      if(index === 0)markerLine.moveTo(point.x, point.y);
      else markerLine.lineTo(point.x,point.y);
});

Environment

• pixi.js version: 5.3.3
• Browser & Version: Chrome 84.0.4147.135
• OS & Version: Windows Microsoft 10 Pro v1909
• Running Example: n/a

[joshuahhh]

Hi @TimHaerkens! Since you closed https://github.com/pixijs/pixi.js/issues/6920, is it appropriate to close this issue? Thanks!

[TimHaerkens]

Yes, I solved the issue. I will close it.