There are certainly a lot of ways you could do this. Me personally, I wouldn't use ref. Ref is really only useful for functions that happen as a reaction to something (like clicking a button, changing a field's value).

Since we need the context, and want to set up a render loop, we'll want to be able to know when the canvas has been created. For this, we'll use useState and pass the setter to the canvas' ref property. The animation loop will setup inside an effect. We need to keep track of wether or not the component is still mounted, so we use a local variable in the effect to keep track of this (and if we're not mounted, we short-circuit the animation frame).

function CanvasComponent() {
  const [canvas, setCanvas] = React.useState();

  React.useEffect(() => {
    // On the first render, canvas won't be set. However, once setCanvas is called by ref, this effect will run again.
    if (canvas == null) return;
    const ctx = canvas.getContext("2d");
    const dashLen = 220;
    let dashOffset = dashLen;
    const speed = 5;
    const txt = "STROKE-ON CANVAS";
    let x = 30;
    let i = 0;

    ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif";
    ctx.lineWidth = 5;
    ctx.lineJoin = "round";
    ctx.globalAlpha = 2 / 3;
    ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
    
    // Keep track of wether the component is still mounted
    let mounted = true;

    const loop = () => {
      if (!mounted) return;
      ctx.clearRect(x, 0, 60, 150);
      ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
      dashOffset -= speed; // reduce dash length
      ctx.strokeText(txt[i], x, 90); // stroke letter

      if (dashOffset > 0) requestAnimationFrame(loop); // animate
      else {
        ctx.fillText(txt[i], x, 90); // fill final letter
        dashOffset = dashLen; // prep next char
        x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
        ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
        ctx.rotate(Math.random() * 0.005); // random rotation
        if (i < txt.length) requestAnimationFrame(loop);
      }
    };

    requestAnimationFrame(loop);
    
    // React will call this function when the effects' dependencies change, or the component is unmounted
    return () => {
      // Set mounted to false so that the next frame is short-circuited.
      mounted = false;
    };
  }, [canvas]);

  return <canvas width="630" ref={setCanvas}></canvas>;
}

Hope this helps.

P.S.

I don't know if it's intentional or not, but in your code, i is never updated.