CANVAS: It is not possible to completely delete arc if using ctx.globalCompositeOperation

First, I draw an arc with diameter at any position. I would then delete a circular area in another position so that it could cut the first arc, using ctx.globalCompositeOperation = ‘destination-out’ and draw an arc and then set ctx.globalCompositeOperation = ‘source- over’. I’ll end up drawing a similar arc at the exact spot I just deleted.
Its two func i used to:

const eraseDot = (ctx, { x, y, size }) => {
    ctx.globalCompositeOperation = 'destination-out';
    drawDot(ctx, { x, y, size:size+1, color: 'white' });
    ctx.globalCompositeOperation = 'source-over';
}

const drawDot = (ctx, { x, y, size, color }) => {
    ctx.beginPath();
    ctx.arc(x, y, size / 2, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
};

My desired result is to draw 2 intersecting arcs (like how to draw 2 normal arcs but I want to clear the image area before drawing the 2nd arc). But it appears that there is a gap between the intersection of the 2 arcs:
enter image description here

this means different erase and draw area sizes. please tell me the reason of this and how to solve it , thanks :