JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" class="keeperCanvas" width='500' height='350' ></canvas>

CSS

.keeperCanvas
{
    border: 1px solid black;
}

JavaScript

var circleHeigth = 30; var arrow = {};

    $(document).ready(function () {

        arrow = { h: 5, w: 10 };
        
        var nodes = [{
            index: 1,
            targets: [2,3]
        },
        {
            index: 2,
            targets: [3]
        },
        {
            index: 3,
            targets: [1,2]
        }];
        
        var circles = [];
        
        if(nodes !== undefined && nodes != null && nodes.length > 0)
        {                      
        var canvas = document.getElementById('myCanvas');

        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            
                var circle1 = {
                    index: 1,
                    x: 75,
                    y: 75,
                    r: circleHeigth
                };
            
            drawCircle(ctx, circle1, 1); 
                ctx.save(); 
            
            $.each(nodes, function(){
                
                var node = this;

                if(this.index == 1)
                    circles.push(circle1);
                else
                {
                    var circleBefore = $.grep(circles, function(e){ return e.index == index - 1; });
                    
                    var circle = {
                        index: this.index,
                        x: circleBefore.x + 80,
                        y: circleBefore.y + 80,
                        r: circleHeigth
                    };
                    
                    circles.push(circle);
                    
                    drawCircle(ctx, circle, node.index); 
                    ctx.save(); 
                }
            
                if(this.targets !== undefined && this.targets != null && this.targets.length > 0)
                    $.each(this.targets, function(){
                        drawOnCanvas(ctx, node, this);
                    });                
            });
        }
        }
    });

    function...