Untitled

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);

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();

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

<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>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
body{padding:20px; background:ivory;}
#kinetic-kard-preview{
  margin-top: 10px;
  width:350px;
  height:350px;
  border:1px solid gray;
}
#target{position:absolute;top:200px;left:150px;opacity:0.50;}
</style>
<script>
$(function(){

//
$pos=$("#results");

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

//
var stage = new Kinetic.Stage({
    container: 'kinetic-kard-preview',
    width: 350,
    height: 350
});

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

//
photoGroup = new Kinetic.Group({
    x : 0,
    y : 0,
    draggable : true,
    id : "photoGroup"
});
photoGroup.on("dragmove",function(){
    var gPos=photoGroup.getPosition();
    var x=parseInt(offsetX+gPos.x);
    var y=parseInt(offsetY+gPos.y);
    $pos.text("photoImage: screenX="+x+", screenY="+y);
});
photoLayer.add(photoGroup);

//
 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.add(photoImage);
    photoLayer.draw();
}
photoObj.src="https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg";


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Semi-transparent flag is at screen position 150,200</h4>
    <p id=results>Drag the opaque flag and see screen position</p>
    <img id=target src='https://dl.dropboxusercontent.com/u/139992952/multple/norwayFlag.jpg'>
    <div id="kinetic-kard-preview"></div>
</body>
</html>