lineTo with 1px difference in one axis drawing huge line

[Screeze]

I try to draw a trail behind the mouse, which shall also collide with objects later. For now I'm saving Points from the mouse path and rendering lines in between those. That works OK until I move the mouse a bit fast in specific patterns. E.g. try to render following and you will see the problem:

const x = [
    //new Phaser.Point(259,447),
    new Phaser.Point(260,437),
    new Phaser.Point(260,423),
    new Phaser.Point(261,440)
    //new Phaser.Point(258,457),
    //new Phaser.Point(253,442),
    //new Phaser.Point(246,423)
];
gfx.lineStyle(30, 0xff0000);
gfx.moveTo(x[0].x, x[0].y);
for (let i = 1; i < x.length; i++) {
    gfx.lineTo(x[i].x, x[i].y)
}

You will se an extremely huge line being drawn (see screenshot 1, you can ignore the circleswhich are not related to this code). Now change the 261 from third point to 260. The line will be very small - close to what it should be (see screenshot 2).

Somehow the line drawing messes up when you draw a thick line and only have few px difference in one axis. increasing the 261 pixel wise makes the huge line smaller and smaller again.

Any idea how to circumvent this?

[Screeze]

Ok I found a hint here http://www.emanueleferonato.com/2017/01/25/string-avoider-html5-game-reinvented-with-mobile-phones-in-mind/ which worked around this issue:
Calling a

gfx.moveTo(x[i].x, x[i].y);

directly behind the

gfx.lineTo(x[i].x, x[i].y)
solved the issue (although it made the path look not nice because now there are spaces in the line when making curves, but i will see how I can solve this).