Как сделать текст по спирали на канвасе?

Question

[Samat]

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);
          }

Есть ли технологии, позволяющие сделать это более изящно?
Как вставлять буквы так, чтобы они принимали нужный угол и как задавать этот угол путем fillText?

Answer 1

[Роман]

просто накидал пример. Думаю посмотрев его вы сможете внести нужные правки в ваш код.

спираль закручена против часовой стрелки

спираль закручена по часовой стрелки