Получить экранные координаты кинетического изображения в Javascript?

Я пишу приложение и использую Kinetic JS-библиотеку для загрузки изображения с клиентского компьютера. Изображение содержится в фотообъекте и инициализируется ниже.

     var photoObj = new Image();

     photoObj.onload = function() {
          var photoImage = new Kinetic.Image({
            x: 0,
            y: 0,
            image: photoObj,
            width: photoObj.width,
            height: photoObj.height,
            name: "photo",
            id: "photo"
          });
      photoGroup.removeChildren();              
      photoGroup.add(photoImage);

Объект включен в объект Kinetic Group с именем photoGroup, который создается ранее.

photoGroup = new Kinetic.Group({
    x : 0,
    y : 0,
    draggable : true,
    id : "photoGroup"
});

photoLayer = new Kinetic.Layer({
    drawBorder: true
});

photoLayer.add(photoGroup);

stage = new Kinetic.Stage({
    container : "kinetic-kard-preview",
    width : 320,
    height : 480
});

stage.add(photoLayer);
stage.draw();

Объект group включен в объект Kinetic Layer с именем photoLayer, который включен в объект Kinetic Stage, названный stage.

Во всяком случае, мой вопрос: теперь я хочу получить координаты экрана изображения. Я успешно получил координаты этапа

var containerOffset=$("#kinetic-kard-preview").offset();
var offsetX=containerOffset.left;
var offsetY=containerOffset.top;
console.log(offsetX);//455.859375 
console.log(offsetY);//218

но я не могу сделать то же самое для изображения. Когда я просматривал исходный код веб-страницы, я заметил, что сгенерированный html-код холста, который содержит изображение, выглядит примерно так.

<canvas width="320" height="480" style="padding: 0px; margin: 0px; border: 0px; background-color: transparent; width: 320px; height: 480px; position: absolute; background-position: initial initial; background-repeat: initial initial;"></canvas>

Как получить координаты экрана изображения после загрузки с клиентского компьютера на холст? Пожалуйста помоги!!! Спасибо.

---

спасибо за ваш ответ, но он, похоже, не может получить то, что мне нужно. Я просто добавил ссылку на скриншот здесь:

Как вы можете видеть на картинке, координаты изображения не совпадают с координатами этапа, который содержит его. Я написал событие mousemove и вычислил - расстояние между координатой экрана x сцены (т.е. OffsetX) и координатой экрана x изображения. - расстояние между координатой экрана y (например, offsetY) и координатой экрана y изображения.

Все они имеют одинаковое число.... 24 (как показано на экране). Используя событие mousemove, я вручную получил значения offsetX, offsetY, а координаты экрана x и y изображения - 455, 218, 479 и 242.

Тем не менее, моя проблема заключается в том, как получить эти цифры автоматически, особенно координаты экрана изображения, после загрузки изображения с моего компьютера. Я напечатал значения gPos для console.log и получил значения (0,0). Поэтому, когда я добавил offsetX и offsetY к этим значениям, они одинаковы (455,218), а не (479,242). Пожалуйста, дайте мне знать, что мне теперь делать? В очередной раз благодарим за помощь.