HTML画布缩小图像上的可拖动文本

<canvas id="myCanvas" width="500" height="300"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = "image.jpg";

var text = "可拖动文本";
var textX = 100;
var textY = 100;
var isDragging = false;

function drawText() {
  ctx.font = "20px Arial";
  ctx.fillText(text, textX, textY);
}

function handleMouseDown(event) {
  var mouseX = event.clientX - canvas.offsetLeft;
  var mouseY = event.clientY - canvas.offsetTop;
  
  if (mouseX >= textX && mouseX <= textX + ctx.measureText(text).width && mouseY >= textY - 20 && mouseY <= textY) {
    isDragging = true;
  }
}

function handleMouseMove(event) {
  if (isDragging) {
    textX = event.clientX - canvas.offsetLeft;
    textY = event.clientY - canvas.offsetTop;
    redraw();
  }
}

function handleMouseUp(event) {
  isDragging = false;
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawText();
}

canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mousemove", handleMouseMove);
canvas.addEventListener("mouseup", handleMouseUp);

drawText();