<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.min.js"></script>
<div>
  <p> <input type='text' id='theText' value='BBB' /> <button id='st'>Change text</button> </p> 
</div>
<div  id='container1' style="width: 300px, height: 200px;"></div>

div
{
  margin: 0 5px;
}
p
{
  margin: 0 5px 5px 0;
}

// Set up the canvas / stage
var s1 = new Konva.Stage({container: 'container1', width: 300, height: 200});

// Add a layer for line
var layer = new Konva.Layer({draggable: false});
s1.add(layer);

// just a plain JS object to keep common variables in hand.
var cfg = { w: 300, h: 200, r: 80, txtSize: 520};

var group = new Konva.Group();
var circle = new Konva.Circle({x: cfg.w/2, y: cfg.h/2, radius: cfg.r, fill: 'DodgerBlue', stroke: 'DeepPink', strokeWidth: 5})
group.add(circle)

// make the text 
var textValue = new Konva.Text({
  id: "t1",
  x: cfg.w/2,
  y: cfg.h/2,
  text: '',
  fill: 'DeepPink ',
  fontSize: cfg.txtSize
});
group.add(textValue);
textValue.offset({x: textValue.getWidth()/2, y: textValue.getHeight()/2});

layer.add(group)

// to spin a group about a point, set the offset to that point, then set the x & y to that point to !
var pos = group.getClientRect();
RotatePoint(group, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});

// Everything is ready so draw the canvas objects set up so far.
s1.draw()


$('#st').on('click', function(){
  group.scaleX(1);
  var txt = $('#theText').val();
  setValue(txt);
})



// set the offset for rotation to the given location and re-position the shape
function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}
var initialPos = shape.getAbsolutePosition();
var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};

// offset is relative to initial x,y of shape, so deduct x,y.
shape.offsetX(moveBy.x);
shape.offsetY(moveBy.y);

shape.x(initialPos.x + moveBy.x);
shape.y(initialPos.y + moveBy.y);
}
 

var setValue = function(newText){

		// work out scaling to make text fit into the circle

		var txt = this.layer.find('#t1')[0];
		txt.text(newText).scale({x:1, y: 1})
		var txtSize = txt.getClientRect();

    var maxW = (cfg.r); // max allowed width of text
		var txtScaleW = (txtSize.width > maxW ? ( maxW / txtSize.width) : 1);

		var maxH = cfg.r; // max allowed height of text
		var txtScaleH = (txtSize.height > maxH ? ( maxH / txtSize.height) : 1);

		// finally decide which is the worst case and use that scaling
		var txtScale = ( txtScaleW > txtScaleH ? txtScaleH : txtScaleW);

    txt.scale({x: txtScale, y: txtScale});

    txt.offset({x: txt.getWidth()/2, y: txt.getHeight()/2});
		layer.draw()
	}
  
  // set initial text & spin !
  setValue('BBB');
  
// The magin animation config.
  var anim, pos = 0, frameCnt = 0
  if (anim) {anim.stop(); }
  anim = new Konva.Animation(function(frame) {
    frameCnt = frameCnt + 1;
    
    if (frameCnt % 2 === 0){
      pos = pos + .2
      var scaleX = Math.sin(pos);
      textValue.visible(scaleX < 0 ? false : true);
      group.scaleX(scaleX);
    }
    
    
  }, layer);
  

 anim.start();