pixi.js - gaps while drawing lines on Graphics

I'm trying to make a simple graphics program for doodling and such, but I'm having some trouble with the line tools provided by PIXI.Graphics().

I draw lines by using events such as pointerdown, pointermove, etc. Saving the last coordinate and then using moveTo and lineTo to draw a continuous line until you trigger pointerup. When drawing a line however gaps appear in semi-regular intervals.

Those gaps are always in the color used in the beginFill() fill statement. Even if I use multiple colors, they will appear in the line, making it not really "gaps" but wrongly colored lines.

When a long line is drawn via code, the same error does not seem to occur. I'm quite stumped by the behaviour and it would be nice if you could help me out!

Here is the code I used:

let app;
let graphics;
var isDrawing = false;
var x = 0;
var y = 0;
var count = 0;
window.onload = function(){
    
    var canvasContainer = document.getElementById("areaCanvasContainer");
    //Create a Pixi Application
    app = new PIXI.Application({ 
        width: 600,
        height: 500,
        antialias: false,
        transparent: false,
        resolution: 1,
        forceCanvas: false,
        backgroundColor: 0xFFFFFF
    });
    canvasContainer.appendChild(app.view);
    
    graphics = new PIXI.Graphics();
    graphics.interactive = true;
    graphics.buttonMode = true;
    
    graphics.beginFill(0xFFFFFF);
    graphics.drawRect(0, 0, 600, 500);
    graphics.endFill();
    graphics.lineStyle(3, 0x000000,1.0,0.5,false);
    
    graphics.on("pointerdown", mousedown);
    graphics.on("pointermove", mousemove);
    graphics.on("pointerup", mouseup);
    graphics.on("pointerupoutside", mouseup);
    
    app.stage.addChild(graphics);
}

function mousedown(e) {
    x = e.data.global.x;
    y = e.data.global.y;
    isDrawing = true;
}

function mousemove(e) {
    if (isDrawing === true) {
        if(Math.abs(x - e.data.global.x) > 2 || Math.abs(y - e.data.global.y ) > 2 ){
            drawLine(graphics, x, y, e.data.global.x, e.data.global.y);
            x = e.data.global.x;
            y = e.data.global.y;
        }
    }
}

function mouseup(e) {
    if (isDrawing === true) {
        drawLine(graphics, x, y, e.data.global.x, e.data.global.y);
        x = 0;
        y = 0;
        isDrawing = false;
    }
}

function drawLine(graphics, x1, y1, x2, y2) {
    if(!(x1 === x2 && y1 === y2)){
        
        graphics.endFill();
        graphics.moveTo(x1, y1);
        graphics.lineTo(x2, y2);
    }
}