<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
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

// Set the group x-scale to mimic a horizontal stretch by the user 


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://unpkg.com/konva@8/konva.min.js