如何在图像上拖放绘制的多边形

Question

如何在图像上拖放绘制的多边形

目前通过鼠标点击在图像上绘制多边形，我可以对最新绘制的多边形执行撤消操作，但是如何对所选多边形执行拖放操作并在位置变更时更新坐标保存数组中的坐标（目前我在做）

//radius of click around the first point to close the draw
var END_CLICK_RADIUS = 15;
//the max number of points of your polygon
var MAX_POINTS = 4;

var mouseX = 0;
var mouseY = 0;
var isStarted = false;
var polygons = [];

var canvas = null;
var ctx;
var image;

window.onload = function() {
  var background = document.getElementById('justanimage');
  //initializing canvas and draw color
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  image = new Image();
  image.onload = function() {
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  };
  image.src = 'https://images.freeimages.com/images/large-previews/2fe/butterfly-1390152.jpg';
  canvas.addEventListener("click", function(e) {
    var x = e.clientX - canvas.offsetLeft;
    var y = e.clientY - canvas.offsetTop;
    if (isStarted) {
      //drawing the next line, and closing the polygon if needed
      if (Math.abs(x - polygons[polygons.length - 1][0].x) < END_CLICK_RADIUS && Math.abs(y - polygons[polygons.length - 1][0].y) < END_CLICK_RADIUS) {
        isStarted = false;
      } else {
        polygons[polygons.length - 1].push(new Point(x, y));
        if (polygons[polygons.length - 1].length >= MAX_POINTS) {
          isStarted = false;
        }
      }
    } else {
      //opening the polygon
      polygons.push([new Point(x, y)]);
      isStarted = true;
    }
  }, false);

  //we just save the location of the mouse
  canvas.addEventListener("mousemove", function(e) {
    mouseX = e.clientX - canvas.offsetLeft;
    mouseY = e.clientY - canvas.offsetTop;
  }, false);

  //refresh time
  setInterval("draw();", 5);
}

//object representing a point
function Point(x, y) {
  this.x = x;
  this.y = y;
}

//resets the application
function reset() {
  isStarted = false;
  points = null;
  document.getElementById("coordinates").innerhtml = " ";
}

//draws the current shape
function draw() {
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#ff0000';
  polygons.forEach(function(points, i) {
    ctx.beginPath();
    points.forEach(function(p, j) {
      if (j) {
        ctx.lineTo(p.x, p.y);
      } else {
        ctx.moveTo(p.x, p.y);
      }
    });
    if (i + 1 === polygons.length && isStarted) { // just the last one
      ctx.lineTo(mouseX, mouseY);
    } else {
      ctx.lineTo(points[0].x, points[0].y);
    }
    ctx.stroke();
  });

}

function undoLastPoint() {
  // remove the last drawn point from the drawing array
  polygons.pop();
}

<canvas id="canvas" width="500" height="500"></canvas>
<button type="button" onclick="undoLastPoint()">Undo</button>
<img id="justanimage" />