Why isn't Text Centered Vertically in KonvaJS?

[nijatmursali]

We are working on an application where we use Konva to draw in canvas, but I have found an issue with text is not centered correctly inside another element even we set correct width and height for the parent.

You can check on this fiddle.

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
  rel="stylesheet"
/>
<script src="https://cdn.rawgit.com/konvajs/konva/2.3.0/konva.min.js"></script>

<div id="container"></div>

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

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

const rect = new Konva.Rect({
  width: 140,
  height: 140,
  stroke: "green",
})
layer.add(rect)

const text = new Konva.Text({
  text: "22",
  fontFamily: "Roboto",
  fontSize: 61,
  width: rect.width(),
  height: rect.height(),
  align: "center",
  verticalAlign: "middle",
})

layer.add(text)

const circle = new Konva.Circle({
  x: rect.width() / 2,
  y: rect.height() / 2,
  radius: 5,
  fill: "red",
})

layer.add(circle)

layer.draw()

I have also tried that on Figma to see if it is correctly centered, and this is the result.

Circle is centered correctly, but Text is not. Green text from screenshot is what it should be like.

This issue happens with platforms that is not IOS (strange). Following screenshots are from IOS and Android:

[lavrton]

1. On the demo, you are using a super old version of Konva. Make sure to use the last one.
2. On the demo, you are not waiting for font loading before render on the canvas. Make sure to do that.
3. You may try to use Konva._fixTextRendering = true; to check if it is producing a better result.

[nijatmursali]

@lavrton thank you for the reply. I have updated the version of Konva, did not help. Regarding, Konva._fixTextRendering = true;, is it possible to use it with TypeScript? I did not find that in documentation.

Edit: what I mean is we can import Konva as:

import Konva from 'konva';
Konva._fixTextRendering = true;

will give an error '_fixTextRendering' does not exist on type 'typeof Konva'.. We can use any, but curious if there is a better way.

[lavrton]

Just try to use as any to check if it helps, I have plans to make Konva._fixTextRendering = true; default.