Drawing a taller and skinnier Konva.js Hexagon

Question

I'd like to draw a "flat" hexagon using a RegularPolygon but would like to adjust the height and width. The "flat" part is easy with a rotation of 30 degrees but I can't seem to figure out how to make it taller and skinnier. Any suggestions?

Thanks in advance.

Dan

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: 150
});

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


var hexagon = new Konva.RegularPolygon({
  x: 100,
  y: 75,
  sides: 6,
  radius: 70,
  fill: 'red',
  rotation: 30
});

layer.add(hexagon);

stage.add(layer);

<script src="https://unpkg.com/konva@^2/konva.min.js"></script>
  <div id="container"></div>

Currently use Lines:

const hex = new Konva.Line({  
points: hex.polygonPoints, // array of points  
closed: true,  
fill: 'rgba(0,0,0,0.6)'  
dashEnabled: false,  
shadowEnabled: false,  
listening: true,  
draggable: false,  
hitStrokeWidth: 0,  
perfectDrawEnabled: false  
});  

Answer 1

You can move a node into the group and use scaleX and scaleY to make it taller.

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: 150
});

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

var group = new Konva.Group({
  x: 100,
  y: 75,
  scaleY: 1.5
})
layer.add(group);
var hexagon = new Konva.RegularPolygon({
  sides: 6,
  radius: 50,
  fill: 'red',
  rotation: 30
});
group.add(hexagon);

stage.add(layer);

<script src="https://unpkg.com/konva@^2/konva.min.js"></script>
  <div id="container"></div>