Reshaping Images (Square, Circle, Triangle, etc.) in Konva.js

Question

I'm working on a project where I need to dynamically reshape images into various shapes like squares, circles, triangles, etc. using Konva.js. I'm familiar with basic image manipulation in Konva.js, but I'm unsure about how to achieve this specific task.

Could someone provide guidance on how to reshape images into different shapes using Konva.js? Any examples or code snippets would be greatly appreciated.

Thank you!

I am using below code for custom shape but every time i've to add sceneFunc without that there is any option.?

  var stage = new Konva.Stage({
      container: 'container', // ID of the container element
      width: 800,
      height: 600
    });

    // Create a layer
    var layer = new Konva.Layer();

    // Create an image object
    var patternImage = new Image();
    patternImage.src = 'https://via.placeholder.com/300x150'; // URL of the pattern image

    // Once the image has loaded, create the shape and set the fill pattern image
    patternImage.onload = function() {
      // Create a custom shape
      var shape = new Konva.Shape({
        x: 50,
        y: 50,
        sceneFunc: function(context) {
          context.beginPath();
          context.moveTo(20, 20);
          context.lineTo(220, 80);
          context.quadraticCurveTo(150, 100, 260, 170);
          context.closePath();
          context.fillStrokeShape(this);
        },
        fillPatternImage: patternImage, // Set the pattern image
        fillPatternRepeat: 'repeat' // Set the pattern repeat mode (repeat, repeat-x, repeat-y, no-repeat)
      });

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

      // Draw the layer
      stage.add(layer);
    };