JavaScript — неправильное положение мыши при рисовании на холсте ⇐ CSS

[Anonymous]

Вот суть проблемы:

https://jsfiddle.net/y5cu0pxf/

Я так много искал и пробовал, но не могу найти проблему. Я просто хочу, чтобы перо рисовало именно там, где щелкнули мышью, но по какой-то причине оно смещено.

Есть идеи?

Вот код:

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){

var reader = new FileReader();

reader.onload = function(event){

var img = new Image();

img.onload = function(){

canvas.width = window.innerWidth * 0.5;
canvas.height = window.innerHeight;

var hRatio = canvas.width / img.width;
var vRatio = canvas.height / img.height;
var ratio = Math.min (hRatio, vRatio);
var centerShift_x = (canvas.width - (img.width * ratio)) / 2;
var centerShift_y = (canvas.height - (img.height * ratio)) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, img.width, img.height,
centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);
}

img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}

var isDrawing;
var rect = canvas.getBoundingClientRect();
var offsetX = rect.left;
var offsetY = rect.top;

canvas.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.clientX - offsetX, e.clientY - offsetY);
};
canvas.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX - offsetX, e.clientY - offsetY);
ctx.stroke();
}
};
canvas.onmouseup = function() {
isDrawing = false;
};


Подробнее здесь: https://stackoverflow.com/questions/438 ... -on-canvas