JSFiddle - React, Tailwind, and code Playground

by Rajasekar Elango

HTML

<!DOCTYPE html>

<body>

<canvas id="canvas" width="900" height="900"
style="background-color:#333">
</canvas>
</body>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawBottomWheelFront()
//drawBottomWheelBack()
//drawTopWheelFront()
//drawTopWheelBack()

function drawDividers(ctx, radius){
   for(num = 0; num < 12; num++){
			drawDivider(ctx,(num+2.5) *5 * Math.PI/30,radius,2)
    }
}

function drawBottomWheelFront() {
  drawFace(ctx, radius, "Bottom Front");  
  drawNumbers(ctx, radius + 20, 1,-4);
  drawNumbers(ctx, radius - 40, 7,-2);
  drawNumbers(ctx, radius - 90, 6,0);
  drawNumbers(ctx, radius - 140, 5,2);
  drawNumbers(ctx, radius - 190, 4,4);
  drawNumbers(ctx, radius - 240, 3,6);
  drawNumbers(ctx, radius - 290, 2,8);
  drawDividers(ctx, radius) ;
  
}

function drawBottomWheelBack() {
  drawFace(ctx, radius, "Bottom Back");
  
  drawNumbers(ctx, radius + 20, 1, -4);
  drawNumbers(ctx, radius - 40, 12, -2);
  drawNumbers(ctx, radius - 100, 11, 0);
  drawNumbers(ctx, radius - 160, 10, 2);
  drawNumbers(ctx, radius - 220, 9, 4);
  drawNumbers(ctx, radius - 280, 8, 6);
  drawDividers(ctx, radius) ;
}

function drawTopWheelFront() {
  drawFace(ctx, radius);
  drawFace(ctx, radius-25);
  drawFace(ctx, radius -70); 
  drawFace(ctx, radius -115);
  drawFace(ctx, radius -160);
  drawFace(ctx, radius -205);
  drawFace(ctx, radius -245);
  drawFace(ctx, radius -285);
  drawFace(ctx, radius -325, "Top Front");
  drawHoles(ctx, radius + 20, 1,-4);
  drawHoles(ctx, radius - 40, 7,-2);
  drawHoles(ctx, radius - 90, 6,0);
  drawHoles(ctx, radius - 140, 5,2);
  drawHoles(ctx, radius - 190, 4,4);
  drawHoles(ctx, radius - 240, 3,6);
  drawHoles(ctx, radius - 290, 2,8);
  drawDividers(ctx, radius) ;
}

function drawTopWheelBack(){
  drawFace(ctx, radius);
  drawFace(ctx, radius-25);
  drawFace(ctx, radius -70); 
  drawFace(ctx, radius -120);
  drawFace(ctx, radius -170);
  drawFace(ctx, radius -215);
  drawFace(ctx, radius -270);
  drawFace(ctx, radius -325, "Top...