JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <canvas width = "500" height = "500" id = "canvas"></canvas>
    </body>

CSS

#canvas {
                border: solid gray 1px;
            }

JavaScript

var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var image = new Image();
            var startX = 137;
            var startY = 243;
            var radius = 80;
            drawPentagon();
            drawHexagon();
            drawMeetingArea();
            drawCircles();
            function drawPentagon() {
                ctx.fillStyle = "rgb(73, 147, 110)";
                ctx.beginPath();
                ctx.moveTo(startX, startY);
                ctx.lineTo(startX + radius * sind(54), startY - radius * cosd(54));
                ctx.lineTo(startX + 2 * radius * sind(54), startY);
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72)), startY + radius * sind(72));
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72) - 1), startY + radius * sind(72));
                ctx.fill();
            }
            function drawHexagon() {
                ctx.fillStyle = "rgb(182, 178, 73)";
                ctx.beginPath();
                ctx.moveTo(startX + radius * (2 * sind(54) - cosd(72)), startY + radius * (sind(72) - 2 * cosd(30)));
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72) + 1), startY + radius * (sind(72) - 2 * cosd(30)));
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72) + 3 / 2), startY + radius * (sind(72) - cosd(30)));
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72) + 1), startY + radius * sind(72));
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72)), startY + radius * sind(72));
                ctx.lineTo(startX + radius * (2 * sind(54) - cosd(72) - 1 / 2), startY + radius * (sind(72) - cosd(30)));
                ctx.fill();
            }
            function drawMeetingArea() {
                ctx.fillStyle = "rgb(56, 110, 38)";
                ctx.beginPath();
                ctx.moveTo(startX + radius * (2 * sind(54) - cosd(72)), startY + radius * sind(72));
             ...