Centering Text in a circle

[xILTx]

Hi All !

I've read many posts here to try to answer my problem, but unfortunately I couldn't find what I was looking for.

The idea is to center a text in a middle of a circle like this :

How could I achieve this result as the text is dynamic ? I know that there is the getTextWidth but it doesn't center the text vertically ?

Also is there a way to ellipsis the text ?

Thank you very much 😍

[Albx68]

I have a "hacky" way of doing this, position the text at x:(circleDiameter/2)-(textWidth/2) and for y:(circleDiameter/2)-(fontSize/2)

fontSize wouldn't give you the exact height but nudge the values a bit until you visually center your text

This is how I've done it in my projects for now but it'd be really nice if there's a textAnchor property

[xILTx]

Really good idea thank you very much !!

[Albx68]

The previous method is deprecated now, you can use this instead
const textDimensions = font.measureText("your text")

[itzyashh]

const x = canvasWidth / 2 - font.measureText(yourText).width / 2;

const y = canvasWidth / 2 + font.measureText(yourText).height / 2;

<Canvas style={{ width: canvasWidth, height: canvasWidth, backgroundColor: 'red' }}> <Text font={font} text={yourText} x={x} y={y} color={'#000'} /> </Canvas>