JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvasFlag" width="200" height="200">
    Your browser does not support the canvas
</canvas>

JavaScript

GenerateCanvas();

function GenerateCanvas() {
    try {
        var FlagCircleCenterCoordinates = new Array();
        var FlagCircles = [];
        
        var CenterX = document.getElementById('canvasFlag').width / 2;
        var CenterY = document.getElementById('canvasFlag').height / 2;

        var OuterTrackRadius = 98;
        var InnerTrackRadius = 70;
        var InnerCircleRadius = 20;

        var FlagElement = document.getElementById("canvasFlag");
        var ObjContext = FlagElement.getContext("2d");

        // Outer track
        ObjContext.fillStyle = "#FFF";
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, OuterTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        ObjContext.fill();

        // Inner track
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerTrackRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();

        // Inner small circle
        ObjContext.beginPath();
        ObjContext.arc(CenterX, CenterY, InnerCircleRadius, 0, 2 * Math.PI);
        ObjContext.strokeStyle = '#CCC';
        ObjContext.stroke();
        
        //Max 17...other wide need to change the Inner and Outer circle radius
        var FlagImagesArray =  [1, 2, 3,4,5];

        if (FlagImagesArray.length > 0) {
            var StepAngle = 2 * Math.PI / FlagImagesArray.length;
            var FlagCircleRadius = (OuterTrackRadius - InnerTrackRadius) / 2;
            var RadiusOfFlagCircleCenters = OuterTrackRadius - FlagCircleRadius;

            for (var LoopCnt in FlagImagesArray) {
                var CircleCenterCoordinates = new Object();
                
                 CircleCenterCoordinates.PostionX = CenterX + (Math.cos(StepAngle * (parseInt(LoopCnt) + 1)) * RadiusOfFlagCircleCenters);
                 CircleCenterCoordinates.PostionY = CenterY + (Math.sin(StepAngle * (parseInt(LoopCnt) + 1)) *...