JSFiddle - React, Tailwind, and code Playground

by Kearnan Kelly

HTML

<p>Drawing radiant lines</p>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
  background-color: ivory;
}

canvas {
  border: 1px solid red;
}

JavaScript

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

var cx = 150;
var cy = 150;
var innerRadius = 50;
var outerRadius = 65;
var startRadians = 15 * Math.PI / 180;
var endRadians = 405 * Math.PI / 180;


for (var value = 0; value <= 1000; value += 15) {

  // scale the guage values (0-1000) 
  // to fit into the range of a partial circle (0-270 degrees)
  var scaledValue = scaleIntoRange(0, 1000, 0, 270, value);
  // rotate so guageValue==0 starts at 135 degrees on the circle
  var degrees = scaledValue + 135;

  // draw the radiant line
  // draw thicker/longer line every 250
  if (value % 250 == 0) {
    //radiantLine(cx, cy, innerRadius, outerRadius, degrees, 2, "black");
  } else {
    var shorterLine = (outerRadius - innerRadius) / 2;
    radiantLine(cx, cy, innerRadius, outerRadius - shorterLine, degrees, 2, "lightgray");
  }
}


// draw inner arc of guage
ctx.beginPath();
ctx.arc(cx, cy, innerRadius, startRadians, endRadians, false);
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.stroke();

// draw outer arc of guage (for illustration only)
ctx.beginPath();
ctx.arc(cx, cy, outerRadius, startRadians, endRadians, false);
ctx.strokeStyle = "lightgray";
ctx.lineWidth = 0.33;
ctx.stroke();


function radiantLine(centerX, centerY, innerRadius, outerRadius, degrees, linewidth, color) {

  var radians = degrees * Math.PI / 180;
  var innerX = centerX + innerRadius * Math.cos(radians);
  var innerY = centerY + innerRadius * Math.sin(radians);
  var outerX = centerX + outerRadius * Math.cos(radians);
  var outerY = centerY + outerRadius * Math.sin(radians);

  ctx.beginPath();
  ctx.moveTo(innerX, innerY);
  ctx.lineTo(outerX, outerY);
  ctx.strokeStyle = color;
  ctx.lineWidth = linewidth;
  ctx.stroke();

}


function scaleIntoRange(minActual, maxActual, minRange, maxRange, value) {
  var scaled = (maxRange - minRange) * (value - minRange) / (maxActual - minActual) + minRange;
  return (scaled);
}