Edit in JSFiddle

JavaScript
HTML
Result

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 Back");
  drawHoles(ctx, radius + 20, 1, -4);
  drawHoles(ctx, radius - 40, 12, -2);
  drawHoles(ctx, radius - 100, 11, 0);
  drawHoles(ctx, radius - 160, 10, 2);
  drawHoles(ctx, radius - 220, 9, 4);
  drawHoles(ctx, radius - 280, 8, 6);
  drawDividers(ctx, radius) ;
}

function drawFace(ctx, radius, title) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
//  ctx.fillStyle = '#FCE4EC';
 ctx.fillStyle = 'white';
  ctx.fill();

  ctx.strokeStyle="#eee";
  ctx.stroke();
  ctx.beginPath();
 
  ctx.fill();
  ctx.font = 15 + "px Tahoma";  
  ctx.textBaseline="middle";
  ctx.fillStyle = '#ccc';
  ctx.textAlign="center";
  ctx.fillText(title, 0, 0);
  ctx.fillStyle = '#222';
}

function drawNumbers(ctx, radius, skip, shift) {
  var ang;
  var num;
  var text;

  ctx.font = 25 + "px Tahoma";  
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    text = num * skip;
    ang = (num + shift) * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(text.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawHoles(ctx, radius, skip, shift) {
  var ang;
  var num;
  var text;

  ctx.font = 25 + "px arial";  
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    text = num * skip;
    ang = (num + shift) * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    if (text == skip){
        ctx.fillText("X", 0, 0);
    }
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawDivider(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

<!DOCTYPE html>

<body>

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