ctx.clearRect函数会在每次点击和移动鼠标时清除画布，因此会清除之前的圆并在其上绘制新的圆。但是如果删除该函数，则每次移动鼠标时都会创建一个新的圆，这不是您想要的。
我的解决方案是添加一个数组变量circles，用于在每次执行mouseup时存储圆的坐标，然后在清除画布后循环circles数组以绘制圆。
此外，我还移除了逻辑，将圆绘制成函数。以下是具体操作：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = 0, last_mousey = 0;
var mousex =0, mousey = 0;
var mousedown = false;
const circles = [];
//Mousedown
$(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX-canvasx);
    last_mousey = parseInt(e.clientY-canvasy);
    mousedown = true;
});

//Mouseup
$(canvas).on('mouseup', function(e) {
    mousedown = false;
    circles.push({
      x1: mousex,
      y1: mousey,
      x2: last_mousex,
      y2: last_mousey
    })
});

function drawCircle(ctx, circle) {
  const { x1,y1,x2,y2 } = circle
  ctx.beginPath();
  //Dynamic scaling
  var scalex = 1*((x1-x2)/2);
  var scaley = 1*((y1-y2)/2);
  ctx.scale(scalex,scaley);
  //Create ellipse
  var centerx = (x2/scalex)+1;
  var centery = (y2/scaley)+1;
  ctx.arc(centerx, centery, 1, 0, 2*Math.PI);
  //Restore and draw
  ctx.restore();
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 5;
  ctx.stroke();
  ctx.save();
}

//Mousemove
$(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        //Save
        ctx.save();
        
        circles.forEach(circle => {
          drawCircle(ctx, circle)
        })
        drawCircle(ctx, {
          x1: mousex,
          y1: mousey,
          x2: last_mousex,
          y2: last_mousey
        })
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="800" height="500" style="border: 1px solid black"></canvas>