Search code examples
javascriptkineticjs

KineticJS Select shape and display div directly below it

I am using KineticJS to draw shapes on a canvas. When a shape is clicked, I would like to overlay a div directly below the selected shape. This will allow the user to change some properties (text, colour etc).

I am handling the click event like this and this is working fine

 myShape.on('click', function () {
    alert('clicked');
    });

So rather than just alerting, I would like to show a div just below the selected shape.

I am not sure how to go about this with positioning a div at a point within the stage.

Many thanks

Solution 
  • image.on('click', function() {
  var input = document.createElement('input');
  input.style.position = 'absolute';
  input.style.top = image.y() + 'px';
  input.style.left = image.x()  + 'px';
  document.body.appendChild(input);
});

    http://jsbin.com/reqile/2/edit?js,output