HTML5 Canvas Drag, Drop, and Resize Images Demo

The demo shows how to manually implement resizing of a shape with Konva shapes primitives.
But also we have a built-it methods for such cases with special Konva.Transformer node. Take a look into Select and Transform demo.
Konva Drag, Drop, and Resize Images Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Image Resize Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.findOne('.topLeft');
        var topRight = group.findOne('.topRight');
        var bottomRight = group.findOne('.bottomRight');
        var bottomLeft = group.findOne('.bottomLeft');
        var image = group.findOne('Image');

        var anchorX = activeAnchor.x();
        var anchorY = activeAnchor.y();

        // update anchor positions
        switch (activeAnchor.getName()) {
          case 'topLeft':
            topRight.y(anchorY);
            bottomLeft.x(anchorX);
            break;
          case 'topRight':
            topLeft.y(anchorY);
            bottomRight.x(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.y(anchorY);
            topRight.x(anchorX);
            break;
          case 'bottomLeft':
            bottomRight.y(anchorY);
            topLeft.x(anchorX);
            break;
        }

        image.position(topLeft.position());

        var width = topRight.x() - topLeft.x();
        var height = bottomLeft.y() - topLeft.y();
        if (width && height) {
          image.width(width);
          image.height(height);
        }
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
          x: x,
          y: y,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 2,
          radius: 8,
          name: name,
          draggable: true,
          dragOnTop: false,
        });

        anchor.on('dragmove', function () {
          update(this);
        });
        anchor.on('mousedown touchstart', function () {
          group.draggable(false);
          this.moveToTop();
        });
        anchor.on('dragend', function () {
          group.draggable(true);
        });
        // add hover styling
        anchor.on('mouseover', function () {
          var layer = this.getLayer();
          document.body.style.cursor = 'pointer';
          this.strokeWidth(4);
        });
        anchor.on('mouseout', function () {
          var layer = this.getLayer();
          document.body.style.cursor = 'default';
          this.strokeWidth(2);
        });

        group.add(anchor);
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // darth vader
      var darthVaderImg = new Konva.Image({
        width: 200,
        height: 137,
      });

      // yoda
      var yodaImg = new Konva.Image({
        width: 93,
        height: 104,
      });

      var darthVaderGroup = new Konva.Group({
        x: 180,
        y: 50,
        draggable: true,
      });
      layer.add(darthVaderGroup);
      darthVaderGroup.add(darthVaderImg);
      addAnchor(darthVaderGroup, 0, 0, 'topLeft');
      addAnchor(darthVaderGroup, 200, 0, 'topRight');
      addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
      addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');

      var yodaGroup = new Konva.Group({
        x: 20,
        y: 110,
        draggable: true,
      });
      layer.add(yodaGroup);
      yodaGroup.add(yodaImg);
      addAnchor(yodaGroup, 0, 0, 'topLeft');
      addAnchor(yodaGroup, 93, 0, 'topRight');
      addAnchor(yodaGroup, 93, 104, 'bottomRight');
      addAnchor(yodaGroup, 0, 104, 'bottomLeft');

      var imageObj1 = new Image();
      imageObj1.onload = function () {
        darthVaderImg.image(imageObj1);
      };
      imageObj1.src = '/assets/darth-vader.jpg';

      var imageObj2 = new Image();
      imageObj2.onload = function () {
        yodaImg.image(imageObj2);
      };
      imageObj2.src = '/assets/yoda.jpg';
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.