JSFiddle - React, Tailwind, and code Playground

by Andy Viohl

HTML

<canvas id="myCanvas" width="320" height="200" style="border:1px solid #666;"></canvas>

CSS

body {
  margin: 0px;
  padding: 0px;
}

JavaScript

// user configurable variables
var textToDraw = 'Visit OneOakWay.com';
var fontStyle = '28pt Calibri';
var color = 'red';
var radius = 130;
var angle = 145;  // in degrees; 0 = auto minimum; if too narrow, draws minimum angle required instead
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = 20;
// word spacing will be determined automatically based on font size; it can be a parameter though
// letter spacing is determined automatically based on given angle; it cannot be forced

drawTextAlongArcInside(context, textToDraw, fontStyle, color, radius, angle, centerX, centerY);

// draw circle underneath text just as a reference
context.strokeStyle = 'orange';
context.arc(centerX, centerY, radius + centerY, 0, Math.PI, false);
context.stroke();

// based on http://www.html5canvastutorials.com/labs/html5-canvas-text-along-arc-path/
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace) {
    var s;
    var r = [];
    var sum = 0;
    var previous = 0;
    angle = angle * Math.PI / 180;
    if (wspace == undefined) wspace = getFontSize(font) / 4;  // word spacing is usually 25% of font size
    var wordSpace = getRadians(wspace, radius);
	var len = str.length;
    for (var n = 0; n < len; n++) {
        s = str[n];
        r[n] = getRadians(textWidth(s, font), radius);
        if (s == ' ') sum += wordSpace;
        sum += r[n];
    }
    var space = (angle - sum) / (len - 1);
    if (space < 0) {
        if (angle == 0) {
            angle = sum;
            space = 0;
        } else {
		    str = (parseInt(sum * 180 / Math.PI) + 1).toString();  // shows minimum required angle
            len = str.length;
            space = wspace/100;
        }
    }
    
	ctx.save();
    ctx.font = font;
    ctx.textAlign = 'center'; // letter must rotate from its center
    ctx.textBaseline = 'middle'; // best looking kerning
    ctx.fillStyle =...