JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// Debug code commented out

// Obviously this will have to change depending on the size of each glyph and the circle, etc.

CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){
   var numDegreesPerLetter = 2*Math.PI / text.length;
   this.save();
   this.translate(x,y);
   this.rotate(startRotation);

   for(var i=0;i<text.length;i++){
      this.save();
      this.translate(radius, 0);
//      if (i == 0) {
//          this.fillStyle = 'red';
          this.translate(10, -10);
//          this.fillRect(0,0,4,4);
          this.rotate(1.4)
          this.translate(-10, 10);          
//          this.fillStyle = 'black';
//      }

//      this.fillRect(0,0,4,4);
      this.fillText(text[i],0,0);
      this.restore();
      this.rotate(numDegreesPerLetter);
   }
   this.restore();
}
    

ctx.font = "bold 30px Serif";
ctx.fillTextCircle("Circle Text ",150,150,75,Math.PI / 2);