JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div id="main" style="width:800px; height:800px">
<canvas id="c" width="800" height="800" style="border: 1px solid"></canvas>
</div>

JavaScript

var canvas = new fabric.Canvas('c')

var text= "Happy Birthday n happy new year"
var headingText = [];
var startAngle = -58;
var textLength = text.length;

var r = getTranslationDistance(text);
var j=-1;
var angleInterval = 116/textLength;
 var topReset = 10;
for(var iterator=(-textLength/2), i=textLength-1; iterator<textLength/2;iterator++,i--) {
  
    var rotation = 90-(startAngle+(i)*angleInterval) ;
    var leftReset = (r)*Math.cos((Math.PI/180)*rotation);
   
   	if(text[i] =='n'){
    	leftReset = -200;
      topReset+=10;
    }
    
    headingText.push(new fabric.IText(text[i], {
      
        angle : j*((startAngle)+(i*angleInterval)),
      shadow: 'rgba(0,0,0,0.5) 5px 5px 5px',
     fontSize:28,
        left: leftReset,
        top: topReset
       
    }));
      
}

var group2 = new fabric.Group(headingText, { left: 0, top: 0 , fontFamily: 'Arial',  strokeWidth: 1,
        
        strokeStyle:"#fff"});
canvas.add(group2);
console.log(group2)

function getTranslationDistance(text){
    var boundingRectangle = $("<div id='tempdiv' style='display:table-cell;font-family:Arial; font-size:28px;'>"+text+"</div>").appendTo("#main");
    
    var translationDistance = $(boundingRectangle).width();
    $(boundingRectangle).remove();
    return translationDistance;
}