i have this code iwant move draed rectangle with mouse after draw <template>
  <div>
    <input type="file" accept="image/*" @change="loadImage" />
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing"></canvas>
    <div v-if="normalizedCoords">
      Normalized Coordinates: (x: {{ normalizedCoords.x.toFixed(2) }}, y: {{ normalizedCoords.y.toFixed(2) }}, width: {{ normalizedCoords.width.toFixed(2) }}, height: {{ normalizedCoords.height.toFixed(2) }})
      <input v-model="normalizedCoords.x"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      isDrawing: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      normalizedCoords: null,
    };
  },
  methods: {
    loadImage(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => this.createImage(e.target.result);
      reader.readAsDataURL(file);
    },
    createImage(src) {
      const img = new Image();
      img.onload = () => {
        this.image = img;
        this.setupCanvas();
      };
      img.src = src;
    },
    setupCanvas() {
      const canvas = this.$refs.canvas;
      canvas.width = this.image.width;
      canvas.height = this.image.height;
      this.drawImage();
    },
    drawImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height);
    },
    startDrawing(event) {
      const rect = this.$refs.canvas.getBoundingClientRect();
      this.isDrawing = true;
      this.startX = (event.clientX - rect.left) * (this.$refs.canvas.width / rect.width);
      this.startY = (event.clientY - rect.top) * (this.$refs.canvas.height / rect.height);
    },
    draw(event) {
      if (!this.isDrawing) return;
      
      const rect = this.$refs.canvas.getBoundingClientRect();
      this.currentX = (event.clientX - rect.left) * (this.$refs.canvas.width / rect.width);
      this.currentY = (event.clientY - rect.top) * (this.$refs.canvas.height / rect.height);

      this.drawImage();  // Redraw the image to clear the previous rectangle
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      const [x, y, width, height] = this.getRectangleDimensions();
      ctx.strokeRect(x, y, width, height);
    },
    endDrawing() {
      if (!this.isDrawing) return;
      this.isDrawing = false;

      this.normalizeCoordinates();
    },
    getRectangleDimensions() {
      const x = Math.min(this.startX, this.currentX);
      const y = Math.min(this.startY, this.currentY);
      const width = Math.abs(this.currentX - this.startX);
      const height = Math.abs(this.currentY - this.startY);
      return [x, y, width, height];
    },
    normalizeCoordinates() {
      const canvas = this.$refs.canvas;
      const width = canvas.width;
      const height = canvas.height;

      const x = Math.min(this.startX, this.currentX) / width;
      const y = Math.min(this.startY, this.currentY) / height;
      const normalizedWidth = Math.abs(this.currentX - this.startX) / width;
      const normalizedHeight = Math.abs(this.currentY - this.startY) / height;

      this.normalizedCoords = { x, y, width: normalizedWidth, height: normalizedHeight };
    },
  },
};
</script>

<style>
canvas {
  border: 1px solid black;
  max-width: 100%;
  height: auto;
}
</style>