Adding Bounded Text to React Force 2D (HTML Canvas)

Indeed, this is very specific to a package, more specifically, @vasturiano's React Force Graph. But, since it makes heavy use of the HTML Canvas and D3.js, I thought maybe someone here could shed a light on how to solve it.

What I would like to do has already been reported on issue #433 of that project, but it hasn't received any answers. Anyways, I would like to add text on top of nodes, with said text not overflowing out of the node circle boundary, something like this:

I think the best you can do right now is something like this — I've only been able to do something like it through React Force 3D actually —:

By using the example of 2D Text Nodes provided by @vasturiano (ctx.fillText(...)), I've managed to add text to circular nodes, but it somehow ends up behind it, no matter where I put it:

<ForceGraph2D
  graphData={dataMemo}
  nodeCanvasObjectMode={() => "before"}
  nodeCanvasObject={(node, ctx) => {
    ctx.beginPath();
    ctx.arc(node.x!, node.y!, NODE_R * 1.4, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.fillText("hello", node.x!, node.y!);
  }
/>

Does anyone know how to stack the text and delimit it properly? I expected the text to at least be on top of the node circles, since it's supposedly only drawn later on, I believe (I don't think there's a z-index on <canvas> so I don't think that's a feasible direction).

@vasturiano provided me a link to how to do the bounded text: Mike Bostock - Fit Text to Circle, while also noting that this is something related to HTML Canvas, not his project itself.

from Adding Bounded Text to React Force 2D (HTML Canvas)