A CodePen by Maksim Surguy.

index.html

<p>Double click on the boxes to edit. Drag to re-position  <button id="save">Save as image</button></p>
<div id="container"></div>

script.js

 var stage = new Kinetic.Stage({
          container: 'container',
          width: 678,
          height: 500
        });
        var layer = new Kinetic.Layer();

        // bound below y=50
        var blueGroup = new Kinetic.Group({
          x: 100,
          y: 70,
          draggable: true
        });

        // bound inside a circle
        var yellowGroup = new Kinetic.Group({
          x: stage.getWidth() / 2,
          y: 70,
          draggable: true
        });

        var blueText = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: '',
          fill: 'black',
          padding: 10
        });

        var blueRect = new Kinetic.Rect({
          width: 200,
          height: 45,
          fill: 'white',
          stroke: '#555',
          cornerRadius: 4,
          strokeWidth: 1
        });

        var yellowText = new Kinetic.Text({
          fontSize: 26,
          fontFamily: 'Calibri',
          text: '',
          fill: 'black',
          padding: 10
        });

        var yellowRect = new Kinetic.Rect({
          width: 200,
          cornerRadius: 4,
          height: 45,
          fill: 'white',
          stroke: 'black',
          strokeWidth: 2
        });

        blueGroup.add(blueRect).add(blueText);
        yellowGroup.add(yellowRect).add(yellowText);

        yellowGroup.on("dblclick dbltap", function() {
             var text=prompt("Please enter text","Text")
             yellowText.setText(text);
             yellowRect.setWidth(yellowText.getWidth());
             layer.draw();
            });

        blueGroup.on("dblclick dbltap", function() {
             var text=prompt("Please enter text","Text")
             blueText.setText(text);
             blueRect.setWidth(blueText.getWidth());
             layer.draw();
            });

        layer.add(blueGroup);
        layer.add(yellowGroup);
        stage.add(layer);

document.getElementById('save').addEventListener('click', function() {
        /*
         * since the stage toDataURL() method is asynchronous, we need
         * to provide a callback
         */
        stage.toDataURL({
          callback: function(dataUrl) {
            /*
             * here you can do anything you like with the data url.
             * In this tutorial we'll just open the url with the browser
             * so that you can see the result as an image
             */
            console.log(dataUrl);
          }
        });
      }, false);