How to flip shapes or image on canvas?

Is it possible mirror shapes vertically or horizontally?

To flip any node with Konva you can use negative scaleX to flip it horizontally or scaleY to flip it vertically.

Remember that scale properties are working relative to origin of a node. For example for rectangle it will be top-left corner, for circle it will be its center. If you want to change origin of a node you can use offsetX and offsetY properties. To better understanding origin and offset, take a look into Position vs Offset post.

Depending on your use case, you may need to manually change {x, y} properties of the node to keep it on its original position after the scale.

Instructions: click on flip button, see how they are mirrored.

Konva Mirror Shapeview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Transparency for several Shapes Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #f0f0f0;
      }

      #flip {
        position: absolute;
        top: 5px;
        left: 5px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <button id="flip">Flip horizontally</button>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

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

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

      var text1 = new Konva.Text({
        x: 180,
        y: 50,
        text: 'Default text with no offset. Its origin is in top left corner.',
        align: 'center',
        width: 200,
      });
      layer.add(text1);

      var text2 = new Konva.Text({
        text: 'Text with the origin in its center',
        width: 200,
        align: 'center',
        y: 100,
        x: 270,
      });
      layer.add(text2);
      // set horizontal origin in the center of the text
      text2.offsetX(text2.width() / 2);

      document.querySelector('#flip').addEventListener('click', () => {
        layer.find('Text').forEach((text) => {
          text.to({
            scaleX: -text.scaleX(),
          });
        });
      });
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.