<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<p id='info'>
  <button id='flip'>Flip Scale -1 (bad)</button>
  <button id='reset'>Reset</button>
  <button id='fliphoriz'>Flip horzontal</button>
  <button id='flipvertical'>Flip vertical</button>
  <button id='flippos'>Flip both</button>
  
  
  
</p> 
<div id="container" class='container'>

 

body {
  margin: 10px;
  overflow: hidden;
  background-color: #f0f0f0;
} 
#container {
  width: 1000px;
  height: 1000px; 
}

const stage = new Konva.Stage({
    container: "container",
    width: 600,
    height: 400,
    draggable: true
  }),
      
  layer = new Konva.Layer({
    draggable: false
  }),
      
  group = new Konva.Group(),
      
  resetPos = { x: 200, y: 60 },
      
  image = new Konva.Image({
    x: resetPos.x,
    y: resetPos.y,
    width: 213,
    height: 236
  });

transformer = new Konva.Transformer();

layer.add(group, transformer);

stage.add(layer);

 
// This is a simple flip but does not adjust position
$("#flip").on("click", function () {
   image.setAttrs({scaleX: -1 * image.scaleX(), scaleY: -1 * image.scaleY()})
});

// This is a generic flip function covering flip H, flip V, flip both, and reset.
function flip(direction, shape) {
  if (direction === "h") {

    const scaleX = -1 * shape.scaleX();
    shape.setAttrs({scaleX: scaleX, x: resetPos.x + (scaleX === -1 ? shape.width() : 0) });
    
  } else if (direction === "v") {

    const scaleY = -1 * shape.scaleY();
    shape.setAttrs({ scaleY: scaleY,  y: resetPos.y + (scaleY === -1 ? shape.height() : 0) });

  } else if (direction === "both") {

    flip('v', shape)
    flip('h', shape) 

  } else if (direction === "reset") {
    
    shape.setAttrs({ scale: { x: 1, y: 1 }, x: resetPos.x, y: resetPos.y });    
  
  }
  
}
$("#flippos").on("click", function () {
  flip('both', image) 
});

$("#flipvertical").on("click", function () {
  flip('v', image) 
});

$("#fliphoriz").on("click", function () {
  flip('h', image) 
});

$("#reset").on("click", function () {
  flip('reset', image);
});

// load the demo image
const imgObj = new Image();
imgObj.onload = function () {
  
  image.image(imgObj);

  group.add(image);
  transformer.nodes([group]);
};
imgObj.src = "https://assets.codepen.io/255591/yoda.jpg";