javascript img クリック イベント 位置 取得

img要素のクリック地点を画像本来の位置で求める

一行でまとめようとして見出しが意味不明になってしまったが
1200*800 のサイズの画像を 300*200 のimg要素に張り付けた際に
画像の一番右下をクリックしたら
X=300, Y=200 ではなく X=1200, Y=800 と画像のサイズに対してのオフセット位置を取得したい。

$('#imgElement').on('click', function(event) {
  var pos = getPositionOnImage(this, event);
});

var getPositionOnImage = function(imgElem, event) {
  // 画像サイズ
  var rw = imgElem.naturalWidth;
  var rh = imgElem.naturalHeight;

  // 画面上の画像サイズ(img要素のサイズ)
  var w  = imgElem.width;
  var h  = imgElem.height;

  // 比率を求める
  var ratioW = rw / w;
  var ratioH = rh / h;

  // 要素上のクリック地点を取得する
  var elemPos = getPositionOnElement(event);

  // 画像上の位置を求める
  var imageX = Math.round(elemPos.x * ratioW)
  var imageY = Math.round(elemPos.y * ratioH)
  var imagePos = { x: imageX, y: imageY };

  return imagePos;
};

var getPositionOnElement = function(event) {
  var rect = event.target.getBoundingClientRect();
  var x = Math.round(event.clientX - rect.left);
  var y = Math.round(event.clientY - rect.top);

  return {x: x, y: y};
};