Позиции мыши не соответствуют размеру холста

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;

Это покажет width = 428 и height = 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 равно 410 586.

На самом деле x, y справа внизу должно равняться (ширина, высота) 428 611

Почему?Как решить проблему?