JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="300" height="300" style="border:1px solid black"></canvas>
<canvas id="canvas2" width="300" height="300" style="border:1px solid black"></canvas>
<canvas id="canvas3" width="300" height="300" style="border:1px solid black"></canvas>
<canvas id="canvas4" width="300" height="300" style="border:1px solid black"></canvas>

JavaScript

document.ready = (function()
                  {
                      drawCircularText(getContext('canvas1'), 'HelloWorld!', 150, 150, 100, 0, 1);
                      drawCircularText(getContext('canvas2'), 'HelloWorld!', 150, 150, 100, 0, -1);
                      drawCircularText(getContext('canvas3'), 'HelloWorld!', 150, 150, 100, 90, 1);
                      drawCircularText(getContext('canvas4'), 'HelloWorld!', 150, 150, 100, 90, -1);
                  })();

function getContext(canvasId)
{
    var context = document.getElementById(canvasId).getContext('2d');
    context.font = '12pt Verdana';
    return context;
}

// (x,y) define center of the circle
// radius gives radius of the circle
// startAngle: [0, 360) defines position on circle where to begin drawing the text
// orientation: +1 for clockwise, -1 for anticlockwise
function drawCircularText(context, text, x, y, radius, startAngle, orientation)
{
    // debugger;
    var N = text.length;
    var step = 2 * Math.PI / N;
    var startRadians = startAngle * Math.PI / 180;        
    for(var i in text)
    {
        context.save();
        context.translate(x,y);
        context.rotate(startRadians + orientation * i * step);
        context.translate(0, -radius);
        context.translate(-x,-y);
        context.fillText(text[i], x, y);
        context.restore();
    }
}