title: How to get the position(in coordinates) of any image element(resizable/draggable) drawn upon html5 canvas?
body: <p>currently i am drawing an image on a html5 canvas onclicking upon that image. the code for drawing that image is given below :</p>
  
  <p>This is the given script function :</p>
  
  <pre><code>&lt;script&gt;
    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 &amp;&amp; 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 &gt;= 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);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>and i am usinmg kinetic-v4.4.0.min.js  (<strong><a href="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js" rel="nofollow noreferrer">http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js</a></strong>) for this, 
  and in html i am just calling this function <strong>putDesign</strong> , so this code will draw a canvas in this iv. </p>
  
  <pre><code>    &lt;div class="behind" id="behind"&gt; 
          &lt;div id="canvasProductImage" style="text-align:center; width:300px;    height:300px; background:url(images/a.png) 100px 100px  no-repeat;"&gt;
  
         &lt;div id="container_canvas"&gt;&lt;/div&gt;
          &lt;/div&gt; 
  </code></pre>
  
  <p>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. </p>
  
  <p>image first :</p>
  
  <p><img src="https://i.stack.imgur.com/oOAwn.png" alt="enter image description here"></p>
  
  <p>image second :</p>
  
  <p><img src="https://i.stack.imgur.com/115wU.png" alt="enter image description here"></p>