Javascript pixi.js-在图形上绘制线条时的间隙

我正试图为涂鸦等制作一个简单的图形程序，但是我在使用PIXI.graphics（）提供的线条工具时遇到了一些问题

我通过使用pointerdown、pointermove等事件绘制直线。保存最后一个坐标，然后使用moveTo和lineTo绘制一条连续直线，直到触发pointerup。然而当画一条线的时候

这些间隙始终使用beginFill（）fill语句中使用的颜色。即使我使用多种颜色，它们也会出现在线条中，使其不是真正的“间隙”，而是

当通过代码绘制一条长线时。 我被这种行为难住了，如果你能帮助我，那就太好了

以下是我使用的代码：

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);
    }
}