Ошибка в координатах картинки
 

Подскажите пожалуйста, я создаю canvas, прикручиваю к нему обработчик событий и отлавливаю координаты. Я проверял при помощи разного софта координаты высчитываются правильно, но когда я добавляю картинку с такими же координатами она получается очень сильно смещенной и растягивается. Как с этим бороться?

Вот код добавления картинки:

var q = document.getElementById("id").getContext('2d');
var img =  new Image();
img.src = '/img/qwe.png';
q.drawImage(img, (event.pageX)-(define.GameArea.offsetLeft),  (event.pageY)-(define.GameArea.offsetTop));

поскольку всего 2 координаты изображение должно выводиться с его родным размером- растягивать ну никак не может.
Соответственно ошибка со смещением и растяжкой не здесь, если это единственный код вставляющий изображение -значит браузер глючит, если не ед. значит ошибка в алгоритме
да и вообще, изображение вставляется в канву по событию onload img иначе можно вставить ещё не загруженное изображение

var q = document.getElementById("id").getContext('2d');
var img =  new Image();
img.src = '/img/qwe.png';
img.onload=function(){
q.drawImage(img, (event.pageX)-(define.GameArea.offsetLeft),  (event.pageY)-(define.GameArea.offsetTop));
}

С браузером все в порядке, проверил в opera и chrome. У меня png изображение шириной 50, а отображается 110. Указал еще две координаты (высоту и ширину) картинка уменьшилась не ее качество стало ужасным

а зум у браузера случайно не включен?:)

Возможно, а как узнать включен или нет?

event.target.offsetLeft

event.target.left


Возможно у вас там число не приходит и складываются строки)

зажать ctrl и покрутить колёсико мыши , либо ctrl +\-

А это нет конечно, canvas лежит в div с фоном, который отображается как надо

Всем спасибо, разобрался))
Размеры canvas у меня были указаны тлько в стилях)