Javascript 使用单选按钮绘制正方形和圆形不起作用

我今天的问题是问为什么当我切换单选按钮时，画一个圆圈不起作用。我正在创建一个绘画程序。请帮我回答这个问题

Html:

和javascript：

var square = true; // Set

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;

$('#colorForm input, #myColor').on('change', function() {
  ctx.fillStyle = $(this).val();
});

$('#sizeForm input').on('change', function() {
  size = $(this).val();
});


var drawRect = function (event) {
  var posX = event.pageX - $(canvas).offset().left - 4
  var posY = event.pageY - $(canvas).offset().top - 4
  ctx.fillRect(posX, posY, size, size)
}

 var drawCircle = function (event) {
  var posX = event.pageX - $(canvas).offset().left
  var posY = event.pageY - $(canvas).offset().top
  ctx.beginPath();
  ctx.arc(posX, posY, size - 1, 0, Math.PI * 2, false);
  ctx.closePath();
  ctx.fill();
}

function mouseDown(e) {
  // We only care about mousemove on the canvas, not the whole page
  if (square) {
    $(canvas).on('mousemove', drawRect).on('mouseup', drawRect);
  } else {
    $(canvas).on('mousemove', drawCircle).on('mouseup', drawCircle);
  }

  // If the user mouseup outside of the canvas, we don't want to keep listening, so listen for mouseup on the whole page to remove our other drawing listeners
  $('html').one('mouseup', function() { // "one" means that it will only fire once and will stop listening after that (cleanup for free)
    $(canvas).off('mousemove').off('mouseup');
  });
}

function clearCanvas() {
  if (confirm("Are you sure you want to clear your drawing?") == true) {
    ctx.clearRect(0, 0, 300, 300)
  }
}

// We only care about mousedown on the canvas, not the whole page
$(canvas).on('mousedown', mouseDown);

---

请帮我回答这个问题。谢谢你的支持

什么意思？画圈不起作用，对我来说似乎起作用：。哦，是的，哇，我的设置可能错了，所以这不是它起作用的原因。谢谢你的帮助！

#canvas {
  border: 1px solid black;
  cursor: crosshair;
}
h2,
h3 {
  margin-bottom: 0;
}
h2 {
  font-size: 1.1rem;
}
h3 {
  font-size: 1rem;
}

var square = true; // Set

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;

$('#colorForm input, #myColor').on('change', function() {
  ctx.fillStyle = $(this).val();
});

$('#sizeForm input').on('change', function() {
  size = $(this).val();
});


var drawRect = function (event) {
  var posX = event.pageX - $(canvas).offset().left - 4
  var posY = event.pageY - $(canvas).offset().top - 4
  ctx.fillRect(posX, posY, size, size)
}

 var drawCircle = function (event) {
  var posX = event.pageX - $(canvas).offset().left
  var posY = event.pageY - $(canvas).offset().top
  ctx.beginPath();
  ctx.arc(posX, posY, size - 1, 0, Math.PI * 2, false);
  ctx.closePath();
  ctx.fill();
}

function mouseDown(e) {
  // We only care about mousemove on the canvas, not the whole page
  if (square) {
    $(canvas).on('mousemove', drawRect).on('mouseup', drawRect);
  } else {
    $(canvas).on('mousemove', drawCircle).on('mouseup', drawCircle);
  }

  // If the user mouseup outside of the canvas, we don't want to keep listening, so listen for mouseup on the whole page to remove our other drawing listeners
  $('html').one('mouseup', function() { // "one" means that it will only fire once and will stop listening after that (cleanup for free)
    $(canvas).off('mousemove').off('mouseup');
  });
}

function clearCanvas() {
  if (confirm("Are you sure you want to clear your drawing?") == true) {
    ctx.clearRect(0, 0, 300, 300)
  }
}

// We only care about mousedown on the canvas, not the whole page
$(canvas).on('mousedown', mouseDown);