I have a problem with my canvas lines is that whenever I try to draw lines they're not smooth, the lines look like a bunch of small lines connected with each other, I tried to find a solution using quadraticCurveTo and calculating a midpoint for the line

const draw = (e) => {
    if (!isPainting) {
        return;
    }
    const x = e.pageX - canvasOffsetX;
    const y = e.pageY - canvasOffsetY;
    points.push({ x: x, y: y });
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.globalAlpha = opacity;
    ctx.imageSmoothingQuality = "high";
    ctx.beginPath();

    if (points.length === 1) {
        ctx.moveTo(x, y);
    } else {
        for (let i = 1, len = points.length; i < len; i++) {
            let xc = (points[i].x + points[i + 1].x) / 2;
            let yc = (points[i].y + points[i + 1].y) / 2;
            ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);

        }

        ctx.stroke();

    }
};

this method worked well but the lines appear after the mouse is up or after the calculation is done which isn't the best approach, I tried to draw the line before changing it after the mouse is up but it didn't work too

the only relative answer I was able to find was this codepen: https://codepen.io/kangax/pen/kyYrdX

but the issue with it is that I have to clear the canvas before drawing new lines and I want all the drawings to be present