JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</div>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 70;
var lineWidth = 5;
var cols = 3;
var rows = 2;
var xDistance = 100;
var yDistance = 50;

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        // Draw circle
        var offset = radius * 2 + lineWidth;
        var center = radius + lineWidth;
        var x = j * (offset + xDistance) + center;
        var y = i * (offset + yDistance) + center;
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = lineWidth;
        context.strokeStyle = '#003300';
        
        if (j != cols - 1) {
            // Draw horizontal line
            var hLineX = x + radius;
            var hLineY = y;
            context.moveTo(hLineX, hLineY);
            context.lineTo(hLineX + xDistance + lineWidth, hLineY);
        }
        if (i > 0) {
            // Draw vertical line
            var vLineY = y - radius - yDistance - lineWidth;
            context.moveTo(x, vLineY);
            context.lineTo(x, vLineY + yDistance + lineWidth);
        }
        context.stroke();
    }
}