2d text sprite with React-three-fiber

[reigj1]

I have this code and it works, but the text is a bit grainy and not that visible. I dont know if I'm doing it wrong. I need to zoom really near the text to make it clear.

Is there a cleaner way to have 2d text sprite that always looks at the camera? (Maybe I should use html?)

function Text({ children, position, scale, color = 'white', fontSize = 45 }) {
 

  const canvas = useMemo(() => {
    var fontface = "Arial";
    var fontsize = fontSize;
    var borderThickness =  4;

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.textBaseline = 'middle'
    context.font = `bold ${fontSize}px -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif`

    var metrics = context.measureText( children );
    console.log(metrics);
  var textWidth = metrics.width;
  
    context.lineWidth = borderThickness;

    context.fillStyle = color
    context.fillText( children, textWidth - (textWidth*0.8), fontsize);    
    return canvas
  }, [children])


  return (
    <sprite 
    scale={scale}
      position={position}>
      <spriteMaterial attach="material" transparent alphaTest={0.5} >
        <canvasTexture attach="map" image={canvas} />
      </spriteMaterial>
    </sprite>
  )
}

export default Text

[reigj1]

I added a Codesandbox for more clarity, try to zoom out and you can see the text starts to become grainy.

https://codesandbox.io/s/breathing-dots-checkpoint-0-forked-qdwsm?file=/src/App.js