beginPath and ctx.arc in HTML/JavaScript

Question

I'm trying to make drawing board. I'm using ctx.beginPath() and to smooth out the edges I added ctx.arc() and ctx.fill(). But the problem is that if I move mouse too quickly it's not drawing continues line. It draws circles with spaces between them. The greater speed of the mouse, the greater are the spaces between circles. Here's my JS code:

var lastX;
var lastY;
var mouseX;
var mouseY;

function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    if (isMouseDown) {
        ctx.beginPath();
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        if (mode == "pen") { //This is drawing mode (The problem is here)
            ctx.globalCompositeOperation = "source-over";
            ctx.arc(lastX, lastY, y, 0, Math.PI * 2, false);  //y is just strokes width
            ctx.fill();
            ctx.stroke();
        } else {  //This is eraser
            ctx.globalCompositeOperation = "destination-out";
            ctx.arc(lastX, lastY, 8, 0, Math.PI * 2, false);
            ctx.stroke();
            ctx.fill();
        }
        lastX = mouseX;
        lastY = mouseY;
    }
}

Answer 1

Draw a path

Rather than draw an arc draw a path with a lineWidth

Set the ctx.lineWidth to the radius of the circle * 2. For end points set ctx.lineCap = "round" and for corners set ctx.lineJoin = "round"

Basic example

Click drag on canvas to draw.

const points = [];
const mouse  = {x : 0, y : 0, button : false}
const ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", mouseEvents);
canvas.addEventListener("mousedown", mouseEvents);
canvas.addEventListener("mouseup", mouseEvents);
function mouseEvents(e){
    mouse.x = e.pageX - 1;
    mouse.y = e.pageY - 1;
    const lb = mouse.button;
    mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
  if (mouse.button) {
      if (!lb) { points.length = 0 }
      points.push({x: mouse.x, y: mouse.y});
      drawPoints();
  } 
}
function drawPoints() {
   ctx.clearRect(0,0, canvas.width, canvas.height);
   ctx.lineWidth = 20;
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.beginPath();
   for (const p of points) { ctx.lineTo(p.x, p.y); }
   ctx.stroke();
}

canvas { 
   position : absolute; top : 0px; left : 0px;
   cursor: crosshair;
   border: 1px solid black;
}

<canvas id="canvas" width="256" height="256"></canvas>