JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="drawingCanvas" width="300" height="200" style="border: 1px solid gray" />

JavaScript

var numberOfSections = 8;
var width = 300;
var height = 200;
var R = Math.sqrt(((width * height) / numberOfSections))/2

var MX = Math.round(width / (R * 2)); // max amount of sqares that can fit on the width
var MY = Math.round(height / (R * 2)); // max amount of sqares that can fit on the height
var skipLast = 0;
var numOfCalculatedCircles = MX*MY;
if(numOfCalculatedCircles != numberOfSections) {
    
    if(numOfCalculatedCircles < numberOfSections) {
        console.log('numOfCalculatedCircles',numOfCalculatedCircles);
        MX = MX + Math.ceil((numberOfSections - numOfCalculatedCircles)/MY);
        if(MX*MY != numberOfSections) {
            skipLast = Math.abs(MX*MY - numberOfSections);
        }
    } else {
        skipLast = numOfCalculatedCircles - numberOfSections;;
    }
    
    console.log('MX*MY',MX*MY);
}
// recalculate the radius for X
if (R * 2 * MX > width) {
    R = (width/2) / MX;
}

// recalculate the radius for Y
if (R * 2 * MY > height) {
    R = (height/2) / MY
}

var circlesWidth = R * 2 * MX;
var circlesHeight = R * 2 * MY;

console.log(circlesWidth, circlesHeight);
var marginX = 0;
var marginY = 0;
if (circlesWidth < width) {
    marginX = (width - circlesWidth) / 2
}
if (circlesHeight < height) {
    marginY = (height - circlesHeight) / 2
}
console.log(marginX, marginY);

var centers = [];
var RY = marginY + R;
console.log(MX);
for (var i = 0; i < MY; i++) {
    var RX = marginX + R;
    for (var j = 0; j < MX; j++) {
        if(i === MY - 1) {
            if(j === MX - skipLast) {
                break;
            }
        }
        centers.push({
            x: RX,
            y: RY
        });
        drawCircleRegular(RX, RY, R)
        RX += 2 * R;
    }

    RY += 2 * R;
}

console.log(centers);

function drawCircleRegular(x, y, radius) {
    var drawingCanvas = document.getElementById('drawingCanvas');
    var drawingContext = drawingCanvas.getContext('2d');
    drawingContext.beginPath();
    drawingContext.arc(x, y,...