How to make text to be always aligned even on curved path - css

Question

I‘m building a "flow-builder" and I need to get this result:
Currently I have this as my edge :
As you can see the text on the edge is matching the edge itself and I need it to align differently like in the first picture
I am new to path/textPath so i cant figure this out.
Here is my "Edge" component
import React from 'react';
import { getSmoothStepPath, getMarkerEnd } from 'react-flow-renderer';
export default function DefaultEdge({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
style = {},
data,
arrowHeadType,
markerEndId,
}) {
const edgePath = getSmoothStepPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
return (
<>
<path id={id} style={style} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
<text>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="90%" textAnchor="middle" >
{data?.text || 'default text'}
</textPath>
</text>
</>
);
}

Answer 1

Since you tagged canvas I'll assume this is being done on a canvas. I can't help with the code you provided but can give an example of how to use the methods built in to canvas to achieve what you want.
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
let pt1 = {x: 50, y: 50};
let pt2 = {x: 200, y: 50};
let pt3 = {x: 230, y: 150};
let pt4 = {x: 230, y: 220};
let pt5 = {x: 230, y: 250};
let nodes = [];
class Nodes {
constructor(x, y) {
this.x = x;
this.y = y;
this.r = 5;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, 5, 0, Math.PI*2);
ctx.fill();
}
}
let node1 = nodes.push(new Nodes(pt1.x, pt1.y));
let node2 = nodes.push(new Nodes(pt3.x, pt3.y));
let node3 = nodes.push(new Nodes(pt4.x, pt4.y));
let node4 = nodes.push(new Nodes(pt5.x, pt5.y));
for (let i=0;i<nodes.length;i++) {
nodes[i].draw();
}
class Edge {
constructor(x, y, lw) {
this.x = x;
this.y = y;
this.lw = lw;
}
draw() {
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(pt1.x, pt1.y);
ctx.lineTo(pt2.x, pt2.y);
ctx.bezierCurveTo(230, 50, 230, 50, 230, 80);
ctx.lineTo(pt3.x, pt3.y);
ctx.moveTo(pt4.x, pt4.y);
ctx.lineTo(pt5.x, pt5.y);
ctx.stroke();
}
}
let edge1 = new Edge();
edge1.draw()
ctx.font = 'bold 20px arial';
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
ctx.fillText('Hello world', pt3.x, (pt3.y + pt4.y)/2);
<canvas id="canvas"></canvas>