JSFiddle - React, Tailwind, and code Playground

by msmini5

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 () {
    
    var nodeOne = {
            index: 1,
            toNode:[{index:2,
                 toNode:[{index: 3}]}]
        };
    
        drawOnCanvas(nodeOne);
    });

    function drawOnCanvas(nodeOne) {
        var canvas = document.getElementById('myCanvas');
        

        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

                var circle = {
                    x: 75,
                    y: 75,
                    r: circleHeigth
                }
                
                arrow = 
                {
                    h: 5,
                    w: 10
                };
            
            drawCircle(ctx, circle, nodeOne.index);
            addNode(nodeOne, circle, ctx);
        }
    }

function addNode(nodeStart, circle, ctx)
{    
    if(nodeStart.toNode !== undefined && nodeStart.toNode.length > 0)
        $.each(nodeStart.toNode,function(){
            debugger;
            
            ctx.save(); 
            
                    var node = this;
                    var nodeCircle = {
                        x: circle.x + 80,
                        y: circle.y + 80,
                        r: circleHeigth
                    };
                    
                    drawCircle(ctx, nodeCircle, node.index);
        
                    var ptCircle1 = getPointOnCircle(circle.r, circle, nodeCircle);
                    var ptCircle2 = getPointOnCircle(nodeCircle.r, nodeCircle, circle);
                    var ptArrow = getPointOnCircle(nodeCircle.r + arrow.w , nodeCircle, circle);
        
                    drawLine(ctx, ptCircle1, ptCircle2);
                    drawArrow(ctx, arrow, ptArrow, ptCircle2);
            
            circle.x+=80;
            circle.y+=80;
        
        addNode(node, nodeCircle, ctx);
                });
}

    function drawArrow(canvasContext, arrow, ptArrow, endPt) {    
        var...