JSFiddle - React, Tailwind, and code Playground

by Vico Bertogli III

HTML

<canvas id="myCanvas" width="750px" height="450px">Your browser does not support the HTML5 canvas tag.</canvas>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

//Define Variables
  var radius = 180;
  var point_size = 4;
  var center_x = (750 / 2);
  var center_y = (450 / 2);
  var font_size = "20px";

  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  function padText(text, padAmt, padChar) {
    text = `${text}`;
    while (text && text.length < padAmt) {
      text = padChar + text;
    }

    return text;
  }

  function drawCircle() {
    ctx.beginPath();
    ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI);
    ctx.stroke();
  }

  function drawPoint(angle, distance, label) {
    var x = center_x + radius * Math.cos(-angle * Math.PI / 180) * distance;
    var y = center_y + radius * Math.sin(-angle * Math.PI / 180) * distance;

    ctx.beginPath();
    ctx.arc(x, y, point_size, 0, 2 * Math.PI);
    ctx.fill();

    var font_label_offset = 1.1;
    var font_x = center_x + radius * Math.cos(-angle * Math.PI / 180) * font_label_offset;
    var font_y = center_y + radius * Math.sin(-angle * Math.PI / 180) * font_label_offset;

		ctx.font = font_size;
    ctx.textAlign = 'center';
    ctx.fillText(`[:${ padText(label, 2, '0') }]`, font_x, font_y);
  }

  // Execution
  drawCircle();

  var total = 60;
  while (total-- > 0) {
    drawPoint((60 - total) * 6, 1, total)
  }