JSFiddle - React, Tailwind, and code Playground

by Vico Bertogli III

JavaScript

document.body.appendChild(getCircularText("[:59][:58][:57][:56][:55][:54][:53][:52][:51][:50][:49][:48][:47][:46][:45][:44][:43][:42][:41][:40][:39][:38][:37][:36][:35][:34][:33][:32][:31][:30][:29][:28][:27][:26][:25][:24][:23][:22][:21][:20][:19][:18][:17][:16][:15][:14][:13][:12][:11][:10][:9][:8][:7][:6][:5][:4][:3][:2][:1][:0]", 845, 0, "center", false, true, "Arial", "14pt", 2));

function getCircularText(text, diameter, startAngle, align, textInside, inwardFacing, fName, fSize, kerning) {
    // text:         The text to be displayed in circular fashion
    // diameter:     The diameter of the circle around which the text will
    //               be displayed (inside or outside)
    // startAngle:   In degrees, Where the text will be shown. 0 degrees
    //               if the top of the circle
    // align:        Positions text to left right or center of startAngle
    // textInside:   true to show inside the diameter. False to show outside
    // inwardFacing: true for base of text facing inward. false for outward
    // fName:        name of font family. Make sure it is loaded
    // fSize:        size of font family. Don't forget to include units
    // kearning:     0 for normal gap between letters. positive or
    //               negative number to expand/compact gap in pixels
 //------------------------------------------------------------------------

    // declare and intialize canvas, reference, and useful variables
    align = align.toLowerCase();
    var mainCanvas = document.createElement('canvas');
    var ctxRef = mainCanvas.getContext('2d');
    var clockwise = align == "right" ? 1 : -1; // draw clockwise for aligned right. Else Anticlockwise
    startAngle = startAngle * (Math.PI / 180); // convert to radians

    // calculate height of the font. Many ways to do this
    // you can replace with your own!
    var div = document.createElement("div");
    div.innerHTML = text;
    div.style.position = 'absolute';
    div.style.top =...