JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="320" height="240"></canvas>

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(120, 120);
//drawNumbers(ctx, 50);
drawNumbers(ctx, 100);
function drawNumbers(ctx, radius) {
    var ang;
    var num;
    ctx.font = radius * 0.15 + "px arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    for (num = 1; num < 13; num++) {
        ang = num * Math.PI / 6;
        ctx.rotate(ang);//畫布順時針轉(30*num)度
        ctx.translate(0, -radius * 0.85);//沿y軸向上移動radius乘以0.85的距離
        ctx.rotate(-ang);//轉回來，這樣待會畫的字才會垂直
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);//畫布順時針轉(30*num)度
        ctx.translate(0, radius * 0.85);//沿y軸向下移動radius乘以0.85的距離
        ctx.rotate(-ang);//轉回來，這樣就回到圓心的位置，角度也恢復
    }
}