Sectors

by painotpi

HTML

<canvas id="circleCanvas" width="600" height="600"></canvas>
<div class="reset">
  <button id="resetButton">
    Reset
  </button>
</div>

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2d2d2d;
}

canvas:hover {
  cursor: pointer;
}

* {
  transition: all 0.3s ease;
}


.reset {
  margin: 20px 0;
}

JavaScript

const canvas = document.getElementById('circleCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = (canvas.width / 2) - 40;
const sectors = 8;
const subsectors = 5;
let filledSectors = new Array(sectors).fill(null).map(() => new Array(subsectors).fill(false));


// We can do individual colors for each sector
const sectorSubColors = {
  ruby: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  golden: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  violet: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  deloitteGreen: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  cyan: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  cobalt: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  emerald: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
  orange: ["#76d95d", "#62c549", "#4eb135", "#3a9d21", "#26890d"],
};

// Convert sectorSubColors to an array to access colors by index
const colorsArray = Object.values(sectorSubColors);

function drawSubsector(ctx, centerX, centerY, innerRadius, outerRadius, startAngle, endAngle, subColors, sectorIndex, subsectorIndex, fill = false) {

  // Draw
  ctx.beginPath();
  ctx.arc(centerX, centerY, outerRadius, startAngle, endAngle, false);
  ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
  ctx.closePath();
  ctx.strokeStyle = '#3f3f3f';
  ctx.lineWidth = 3;
  ctx.stroke();

  if (fill) {
    ctx.fillStyle = subColors[subsectorIndex];
    ctx.fill();
  }
}

function drawCanvas() {
	// Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Calculate the angle for each sector based on the number of sectors
  const anglePerSector = (2 * Math.PI) / sectors;
  for (let i = 0; i < sectors; i++) {
    for (let j = 0; j < subsectors; j++) {
      let innerRadius = maxRadius / subsectors * j;
      let outerRadius = maxRadius / subsectors * (j + 1);
      
     ...