javascript获取绘制的正方形的x和y坐标

我想得到我用鼠标画的正方形的x和y坐标。当我得到坐标时，我需要将它们发送到后端，而现在当我绘制一个正方形时，我无法再绘制一个。我需要我画的那个正方形，我会留下来，或者如果我画错了地方，我可以把它删掉。 也许有人能帮我

这是我正在使用的代码：

 var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;

canvas.style.background = "white";

function init() {
    imageObj = new Image();
    imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
    imageObj.src =
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(imageObj, 0, 0);

        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = '#ff0000';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}
//
init();

document.getElementById('imageLoader').onchange = function(e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};

function draw() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0,0);
  imageObj = this;
}