<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<p id="info"></p>
<p id="info2"></p>
<div id='container1' class='container'>
</div>
 

.container {
  width: 300px;
  height: 200px;
  background-color: silver;
  margin: 5px;
  margin-left: 150px;
}
 

// Making the stage
let stage = new Konva.Stage({container: "container1", width: $('#container1').width(),  height: $('#container1').height()});
// And now we create the handler object.

// Make the layer
let layer = new Konva.Layer();

// Make the rect
let rect1 = new Konva.Rect({x: 100, y: 60, width: 100, height: 80, fill: 'red', strokeWidth: 1, draggable: false});

// Add rect1 to layer1 
layer.add(rect1);

// make the transformer
let transformer = new Konva.Transformer({nodes: [rect1], borderEnabled: true});
// Add transformer to layer1 
layer.add(transformer);

// Add layer to stage
stage.add(layer)

transformer.on('transform', function(){
  showInfo(rect1.position(), rect1.size(), rect1.scaleX(), rect1.scaleY(), rect1.rotation(), rect1.getTransform().copy())

})

function showInfo(pos, size, scaleX, scaleY, rotation, matrix){
  
  let posX = pos.x.toFixed(2);
  let posY = pos.y.toFixed(2);
  let w = size.width.toFixed(2);
  let h = size.height.toFixed(2);
  let sX = scaleX.toPrecision(2);
  let sY = scaleY.toPrecision(2);
  let r = rotation.toFixed(2);
  
    $('#info').html("Position {x: " + posX + ", y: " + posY + "} rotation " + r + " size {" + w + ", " + h + "} scale {x: "+ sX + ", y:" + sY + "}")
  
  if (matrix){   
    console.log(matrix.decompose())
  }
  else {
    $('#info').html('Info will show here')
  }
}

rect1.on('click', function(){
  
  showInfo(rect1.position(), rect1.size(), rect1.scaleX(), rect1.scaleY(), rect1.rotation())

})
 
rect1.fire('click');