How to make spiral text on canvas?

Question

JavaScript

const wrap = this.spiralText.nativeElement;
          wrap.width = 400;
          wrap.height = 400;
          const ctx: CanvasRenderingContext2D = wrap.getContext('2d');
          ctx.font = String(
            +this.FONT_SETTINGS.fontWeight + ' ' + this.FONT_SETTINGS.fontSize + 'px ' + this.FONT_SETTINGS.font
          );
          const tElem = this.text?.text.split('')!;

          let centerX = ctx.canvas.width / 2,
            centerY = ctx.canvas.height / 2;

          ctx.clearRect(0, 0, 400, 400);

          ctx.moveTo(centerX, centerY);
          ctx.beginPath();
          for (let i = 0; i < 400; i++) {
            let angle = 0.1 * i;
            let x = centerX + 4 * angle * Math.cos(angle);
            let y = centerY + 4 * angle * Math.sin(angle);
            ctx.fillText(tElem[i], x, y, 25);
          }

Is there technology to do this more gracefully?
How to insert letters so that they take the desired angle and how to set this angle with fillText?

Answer 1

just gave an example. I think after looking at it you will be able to make the necessary changes to your code.

spiral twisted counterclockwise

spiral twisted clockwise