create textshadow in konvajs

Question

I want to create a textshadow in konvajs, but don't know how to create a shadow similar to the one below.

How would it effect the performance if I would just create the same text 15-20 times, but without the color and just set one shadow for each text.

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-shadow:
    #fff 1.5px 0px 0px, #fff 1.386px 0.5745px 0px, #fff 1.0605px   1.0605px 0px, #fff 0.5745px 1.386px 0px, #fff 0px 1.5px 0px, #fff -0.5745px 1.386px 0px, #fff -1.0605px 1.0605px 0px, #fff -1.386px 0.57405px 0px, #fff -1.5px 0px 0px, #fff -1.386px -0.5745px 0px, #fff -1.0605px -1.0605px 0px, #fff -0.5745px -1.386px 0px, #fff 0px -1.5px 0px, #fff 0.5745px -1.386px 0px, #fff 1.0605px -1.0605px 0px, #fff 1.386px -0.5745px 0px;
}
.container {
  position: relative;
  width: 100%;
  height: 20vh;
  background-color: black;
}

<div class="container"><div class="text">this is a example text</div></div>

Answer 1

You can use stroke on text element to have a similar effect.

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

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

const shape = new Konva.Text({
  x: 50,
  y: 50,
  text: 'this is a example text',
  fill: 'black',
  stroke: 'white',
  strokeWidth: 5,
  fillAfterStrokeEnabled: true,
});
layer.add(shape);

layer.draw();

#container {
  background-color: black;
}

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