const square = new Konva.Shape({
  x: 50,
  y: 30,
  stroke: 'rgba(0,0,0,0.5)',
  strokeWidth: 20,
  fill: 'green',
  draggable: true,
  width: 100,
  height: 100,
  sceneFunc: (ctx, shape) => {
    ctx.rect(0, 0, shape.width(), shape.height());
    // first stroke
    ctx.strokeShape(shape);
    // then fill
    ctx.fillShape(shape);
  }
});
layer.add(square);

const triangle = new Konva.Shape({
  x: 250,
  y: 30,
  stroke: 'rgba(0,0,0,0.5)',
  strokeWidth: 20,
  fill: 'green',
  draggable: true,
  sceneFunc: (ctx, shape) => {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(50, 100);
    ctx.lineTo(-50, 100);
    ctx.closePath();
    // first stroke
    ctx.strokeShape(shape);
    // then fill
    ctx.fillShape(shape);
  }
});
layer.add(triangle);