JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='cogs' width='300px' height='300px'></canvas>

JavaScript

var arr = ['1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','1','2','3','4','5'];

function drawNumber() {
    var cID = document.getElementById('cogs');
    var canW = cID.width,
        canH = cID.height;
    if (cID && cID.getContext){
        var ctx = cID.getContext('2d');
        if(ctx) {            
            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
            var radian = (Math.PI / 180) * 18;
            var i = 0
            for (var degrees = 0; degrees < 360; degrees += 18) {
                var fillNum = arr[i];
                ctx.font = "12pt Arial"
                ctx.rotate(radian);
                rotateText(fillNum);
                i++;
            }
            ctx.translate(-canW/2, -canH/2);
        }
    }
}

function rotateText(i){
    var cID = document.getElementById('cogs');
    ctx = cID.getContext('2d');
    ctx.fillText(i, -5, 150);
}

drawNumber();