How to get the position(in coordinates) of any image element(resizable/draggable) drawn upon html5 canvas?

Question

currently i am drawing an image on a html5 canvas onclicking upon that image. the code for drawing that image is given below :

This is the given script function :

<script>
  function update(activeAnchor) {
    var group = activeAnchor.getParent();

    var topLeft = group.get('.topLeft')[0];
    var topRight = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft = group.get('.bottomLeft')[0];
    var image = group.get('.image')[0];

    var anchorX = activeAnchor.getX();
    var anchorY = activeAnchor.getY();

    // update anchor positions
    switch (activeAnchor.getName()) {
      case 'topLeft':
        topRight.setY(anchorY);
        bottomLeft.setX(anchorX);
        break;
      case 'topRight':
        topLeft.setY(anchorY);
        bottomRight.setX(anchorX);
        break;
      case 'bottomRight':
        bottomLeft.setY(anchorY);
        topRight.setX(anchorX); 
        break;
      case 'bottomLeft':
        bottomRight.setY(anchorY);
        topLeft.setX(anchorX); 
        break;
    }

    image.setPosition(topLeft.getPosition());

    var width = topRight.getX() - topLeft.getX();
    var height = bottomLeft.getY() - topLeft.getY();
    if(width && height) {
      image.setSize(width, height);
    }
  }

  function addAnchor(group, x, y, name) {
    var stage = group.getStage();
    var layer = group.getLayer();

    var anchor = new Kinetic.Circle({
      x: x,
      y: y,
      stroke: '#666',
      fill: '#ddd',
      strokeWidth: 2,
      radius: 8,
      name: name,
      draggable: true,
      dragOnTop: false
    });

    anchor.on('dragmove', function() {
      update(this);
      layer.draw();
    });
    anchor.on('mousedown touchstart', function() {
      group.setDraggable(false);
      this.moveToTop();
    });
    anchor.on('dragend', function() {
      group.setDraggable(true);
      layer.draw();
    });
    // add hover styling
    anchor.on('mouseover', function() {
      var layer = this.getLayer();
      document.body.style.cursor = 'pointer';
      this.setStrokeWidth(4);
      layer.draw();
    });
    anchor.on('mouseout', function() {
      var layer = this.getLayer();
      document.body.style.cursor = 'default';
      this.setStrokeWidth(2);
      layer.draw();
    });

    group.add(anchor);
  }

  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  function initStage(images) {
    var stage = new Kinetic.Stage({
      container: 'container_canvas',
      width: 578,
      height: 400
    });
    var darthVaderGroup = new Kinetic.Group({
      x: 270,
      y: 100,
      draggable: true
    });

    var layer = new Kinetic.Layer();


    layer.add(darthVaderGroup);

    stage.add(layer);


    var darthVaderImg = new Kinetic.Image({
      x: 0,
      y: 0,
      image: images.darthVader,
      width: 200,
      height: 138,
      name: 'image'
    });

    darthVaderGroup.add(darthVaderImg);
    addAnchor(darthVaderGroup, 0, 0, 'topLeft');
    addAnchor(darthVaderGroup, 200, 0, 'topRight');
    addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
    addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');

    darthVaderGroup.on('dragstart', function() {
      this.moveToTop();
    });
    stage.draw();

  }
function putDesign(designSrc)
{
designSrc = designSrc.split("images/"); 
 var sources = {
    darthVader: 'images/'+designSrc[1],
  };
  loadImages(sources, initStage);
  }
</script>

and i am usinmg kinetic-v4.4.0.min.js (http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js) for this, and in html i am just calling this function putDesign , so this code will draw a canvas in this iv.

    <div class="behind" id="behind"> 
        <div id="canvasProductImage" style="text-align:center; width:300px;    height:300px; background:url(images/a.png) 100px 100px  no-repeat;">

       <div id="container_canvas"></div>
        </div> 

Now this code will make me to draw an image in a div. here the image 1(tshirt (background image of the div in which we will draw our canvas)) , and image 2 (the drawn element), so the mai task is that how can i get the position of drwan image, means how will i know the position of the drawn image on the canvas in coordinates ? as the image object is resizable ansd draggable so i want the last positioned coordinates ? Thanks in advance i am very near to my objective, kindly help.

image first :

image second :

Answer 1

How to get draggable/resizable image information (X/Y/Width/Height)

This code will report your image info when you drag/resize it:

      darthVaderGroup.on("dragend",function(){$("#info").text(getImageInfo());});

      function getImageInfo(){
          var image=darthVaderImg;
          return(
              "   X/Y:"+
              image.getAbsolutePosition().x+"/"+
              image.getAbsolutePosition().y+" -- Width/Height:"+
              image.getWidth()+"/"+
              image.getHeight()          
          );
      }

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/Hm9uN/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script>

<style>
    body{ background-color: ivory; padding:15px; }
    canvas{border:1px solid red;}
    #wrapper{ position:relative; width:400px; height:400px; }
    #Tshirt,#container_canvas{ position:absolute; top:0; left:0; }
</style>

<script>
$(function(){

    function update(activeAnchor) {
      var group = activeAnchor.getParent();
      var topLeft = group.get('.topLeft')[0];
      var topRight = group.get('.topRight')[0];
      var bottomRight = group.get('.bottomRight')[0];
      var bottomLeft = group.get('.bottomLeft')[0];
      var image = group.get('.image')[0];

      var anchorX = activeAnchor.getX();
      var anchorY = activeAnchor.getY();

      // update anchor positions
      switch (activeAnchor.getName()) {
        case 'topLeft':
          topRight.setY(anchorY);
          bottomLeft.setX(anchorX);
          break;
        case 'topRight':
          topLeft.setY(anchorY);
          bottomRight.setX(anchorX);
          break;
        case 'bottomRight':
          bottomLeft.setY(anchorY);
          topRight.setX(anchorX); 
          break;
        case 'bottomLeft':
          bottomRight.setY(anchorY);
          topLeft.setX(anchorX); 
          break;
      }

      image.setPosition(topLeft.getPosition());

      var width = topRight.getX() - topLeft.getX();
      var height = bottomLeft.getY() - topLeft.getY();
      if(width && height) {
        image.setSize(width, height);
      }

      imgX=image.getAbsolutePosition().x;
      imgY=image.getAbsolutePosition().y;
      imgWidth=image.getWidth();
      imgHeight=image.getHeight();

    }

    function addAnchor(group, x, y, name) {
      var stage = group.getStage();
      var layer = group.getLayer();

      var anchor = new Kinetic.Circle({
        x: x,
        y: y,
        stroke: '#666',
        fill: '#ddd',
        strokeWidth: 2,
        radius: 8,
        name: name,
        draggable: true,
        dragOnTop: false
      });

      anchor.on('dragmove', function() {
        update(this);
        layer.draw();
      });
      anchor.on('mousedown touchstart', function() {
        group.setDraggable(false);
        this.moveToTop();
      });
      anchor.on('dragend', function() {
        group.setDraggable(true);
        layer.draw();
      });
      // add hover styling
      anchor.on('mouseover', function() {
        var layer = this.getLayer();
        document.body.style.cursor = 'pointer';
        this.setStrokeWidth(4);
        layer.draw();
      });
      anchor.on('mouseout', function() {
        var layer = this.getLayer();
        document.body.style.cursor = 'default';
        this.setStrokeWidth(2);
        layer.draw();
      });

      group.add(anchor);
    }

    function initStage(images) {
      var stage = new Kinetic.Stage({
        container: 'container_canvas',
        width: 578,
        height: 400
      });
      var darthVaderGroup = new Kinetic.Group({
        x: 270,
        y: 100,
        draggable: true
      });
      var layer = new Kinetic.Layer();
      layer.add(darthVaderGroup);
      stage.add(layer);


      var darthVaderImg = new Kinetic.Image({
        x: 0,
        y: 0,
        image: images.darthVader,
        width: 200,
        height: 138,
        name: 'image'
      });

      darthVaderGroup.add(darthVaderImg);
      addAnchor(darthVaderGroup, 0, 0, 'topLeft');
      addAnchor(darthVaderGroup, 200, 0, 'topRight');
      addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
      addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');

      darthVaderGroup.on('dragstart', function() {
        this.moveToTop();
      });
      stage.draw();

      darthVaderGroup.on("dragend",function(){$("#info").text(getImageInfo());});

      function getImageInfo(){
          var image=darthVaderImg;
          return(
              "   X/Y:"+
              image.getAbsolutePosition().x+"/"+
              image.getAbsolutePosition().y+" -- Width/Height:"+
              image.getWidth()+"/"+
              image.getHeight()          
          );
      }

    }

  function putDesign(designSrc){
      designSrc = designSrc.split("images/"); 
      var sources = {
          darthVader: 'http://dl.dropbox.com/u/139992952/stackoverflow/love.png'
      };
      loadImages(sources, initStage);
  }

  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  putDesign("yourAssets");


}); // end $(function(){});
</script>

</head>

<body>
    <p>Info:<span id="info"></span></p><br/>
    <div id="wrapper">
        <img id="Tshirt" src="http://dl.dropbox.com/u/139992952/stackoverflow/Tshirt.png" width=167px height=167px>
        <div id="container_canvas"></div>            
    </div><br/>
</body>
</html>