<script src="https://unpkg.com/konva@^3/konva.min.js"></script>

<div id="container"></div>

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

#container {
  border: 1px solid transparent;
}

let 
    scale = 2,  // we'll use scale so we can see the detail if needed.
    stage = new Konva.Stage({ // Set up a stage
      container: "container",
      width: window.innerWidth,
      height: window.innerHeight, 
      scaleX: scale, scaleY: scale,
      draggable: true
    }),
    // add a layer to draw on
    layer = new Konva.Layer(),  
    
    // make a text object to clone to keep the clutter down.
    wordText = new Konva.Text({
      fontFamily: "Arial",
      fontSize: "10",
      fontStyle : "",
      fontVariant : "",
      fill: 'black'
    }),
    
    // the phrase we will measure the words for.
    phrase = "Around the ragged rock the ragged wombat ran",
    
    // The phrase broken into an array of words.
    words = phrase.split(" "),
    
    // a variable to track the y-position of the text for this demo.
    lastHeight = 0;
    

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

// Loop throught the phrase array, measure and display each word and its dimensions.
 for (let i = 0; i < words.length; i++){
   
   // Make a text object of the word from the phrase
   let txt = wordText.clone({
     x : 0,
     y: lastHeight, // use the lastHeight variable to vertically position the output.
     text: words[i]
   }),
            
   // And another to display the dimensions of the word
   szTxt = wordText.clone({
     text: "(" + txt.width() + "w x " + txt.height() + "h)",
     x: txt.width() + 10,
     y: txt.y()
   });

   // increment the height variable.
   lastHeight = lastHeight + txt.height() + 5;
   
   // add the text objects to the stage so we can see them
   layer.add(txt, szTxt)
      
 }

// refresh the canvas.
layer.batchDraw();
stage.draw();