鼠标位置与画布大小不匹配

Question

如果我移动鼠标指向画布的右下角。它不是相等宽度的画布。为什么？如何正确获得（x，y）位置。

HTML代码：

    <div class="panel02" style="width: 32%;">
    <div id="map">
        <canvas id="mycanvas" style="z-index: 1; cursor: default;" width="428" height="611"> </canvas>
    </div>          
    </div>

我通过此代码将图像绘制到画布中

        var c = document.getElementById("mycanvas");
        var ctx = c.getContext("2d");    
        ctx.drawImage(img,0,0,428,611);

所以我尝试获取此元素的宽度和高度

        var nImgWidth = document.getElementById('mycanvas').width;
        var nImgHeight = document.getElementById('mycanvas').height;

如上图所示，它将显示宽度= 428和高度= 611。

接下来，我通过此代码从鼠标位置获得（x，y）协调 鼠标移动时调用了此代码。

    var overlay = document.getElementById('mycanvas');
    octx = overlay.getContext('2d');
    var offsetX = overlay.getBoundingClientRect().left;
    var offsetY = overlay.getBoundingClientRect().top;

    x = e.clientX - offsetX;
    y = e.clientY - offsetY;    

但是当我尝试将鼠标移到画布的右下角时。 x，y永远不等于宽度，高度。

根据上述图像x，y为410,586。

实际上，右下角的x，y应该等于（宽度，高度）428,611

为什么？如何解决问题？