<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<div id="container"></div>

body {
  margin: 10;
  padding: 10;
  overflow: hidden;
  background-color: #f0f0f0;
}

// Set up a stage
let stage = new Konva.Stage({
  container: "container",
  width: window.innerWidth,
  height: window.innerHeight
}),
  // add a layer to draw on
  layer = new Konva.Layer(),
  
  // set some initial dimensions
  x = 20, 
  y = 80,
    
  // Make a group into which we will add the rect & text     
  group1 = new Konva.Group({draggable: true}), 

  // Make a simple rectangle node      
  rect1 = new Konva.Rect({
    name: "r1",
    x: x,
    y: y,
    width: 120,
    height: 80,
    fill: "magenta",
    name: "rect"
  }),

  // Make a text node  
  txt1 = new Konva.Text({
    x: x,
    y: y,
    text: "Stretchy Text",
    fontSize: 20,
    fontFamily: "Calibri",
    fill: "green",
    name: "text"
  }),
    
  // set up the transformer
  tr1 = new Konva.Transformer();

// Now compose the shapes onto the canvas and connect them as needed

// Add the layer to the stage and shapes to layer
stage.add(layer);
layer.add(group1, tr1);

// add shapes into the group - you can do these individually too
group1.add(rect1, txt1);

// Finally connect the transformer to the group
tr1.nodes([group1]);

// Set the group x-scale to mimic a horizontal stretch by the user 
group1.scaleX(2)

stage.draw();