Javascript 在画布绘图上检测鼠标单击

我目前有一个问题的情况- 我有一个重新调整大小的画布重新调整大小的基础上调整大小的事件，有一些矩形正在绘制它，这些矩形有X，Y，宽度和高度属性现在。。。 当我调整画布的大小时，一切都很好，图形是相对于画布大小绘制的。 问题是它们的X和Y没有改变，所以当我尝试使用任何鼠标事件来检测鼠标位置是否在矩形内时，除了Begging之外，它不起作用，例如- 例如，如果我在窗口大小为1024*768时初始化所有内容，那么矩形X和Y的位置将为50乘50，如果我将鼠标单击X:50，它将碰撞并检测到它，但是，如果我将浏览器窗口的大小调整为689*400，我将单击矩形，它将不起作用

有人能解决这个问题吗

TL；DR-在重新调整窗口大小后，如何检测具有X，Y的单击矩形

画布大小调整-

window.addEventListener("resize", function() {
                        self.canvas.fitToBrowser();
                    });

Kanivas.prototype.fitToBrowser = function() {
    if (this.canvas.width < window.innerWidth)
    {
        this.canvas.width = window.innerWidth;
        this.cHeight = this.canvas.width;
    }

    if (this.canvas.height < window.innerHeight)
    {
        this.canvas.height = window.innerHeight;
        this.cHeight = this.canvas.height;
    }
};

鼠标向下处理程序-

this.canvas.addEventListener("mousedown",
            function(kanivas, event) {
                console.log(state);
                self.mouseDownHandler(kanivas, event);
            }.bind(null, this), false);

Kanivas.prototype.mouseDownHandler = function(kanivas, e) {
    var shape = null;
    var i = kanivas.shapes.length;
    while (i--) {
        shape = kanivas.shapes[i];
        if (shape.isInside !== undefined && shape.isInside(e.clientX, e.clientY)) {
            shape.mouseDownHandler();
        }
    }
};
 //Inside the rectangle object
 this.isInside = function(x, y) {
        return ((x >= this.x && x <= this.x + this.width) &&
                (y >= this.y && y <= this.y + this.height));
    };

---

你能提供一些你当前的代码吗？例如，您的调整大小代码和用于检测碰撞的代码。@flowstoneknight Sure我认为您需要根据需要调整上下文的大小well@JonasGrumann你是什么意思？你没有显示绘制/处理缩放的代码部分。最好是为我们创建一个工作的JSFIDLE来查看/修复这个问题。必须确保应用于矩形的缩放也应用于鼠标坐标。