JSFiddle - React, Tailwind, and code Playground

by msmini5

HTML

<canvas id="myCanvas" class="keeperCanvas" ></canvas>

CSS

.keeperCanvas
{
    border: 1px solid black;
    width: 500px;
    height: 350px
}

JavaScript

$(document).ready(function () {
        drawOnCanvas();
    });

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

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

            var circle1 = {
                x: 75,
                y: 75,
                r: 15
            };

            var circle2 = {
                x: 225,
                y: 50,
                r: 15
            };
            
            var arrow = 
                {
                    h: 5,
                    w: 10
                };

            drawCircle(ctx, circle1, "1");
            drawCircle(ctx, circle2, "2");

            var ptCircle1 = getPointOnCircle(circle1.r, circle1, circle2);
            var ptCircle2 = getPointOnCircle(circle2.r, circle2, circle1);
            var ptArrow = getPointOnCircle(circle2.r + arrow.w, circle2, circle1);

            drawLine(ctx, ptCircle1, ptCircle2);
            drawArrow(ctx, arrow, ptArrow, ptCircle2);
        }
    }

    function drawArrow(canvasContext, arrow, ptArrow, endPt) {
    
        var angleInDegrees = getAngleBetweenPoints(ptArrow, endPt);
        
        canvasContext.beginPath();
        // first save the untranslated/unrotated context
        canvasContext.save();        
        
        // move the rotation point to the center of the rect    
        canvasContext.translate(-ptArrow.x/20, ptArrow.y/3.5);        
        // rotate the rect
        canvasContext.rotate(angleInDegrees/100);

        canvasContext.moveTo(endPt.x, endPt.y);
        canvasContext.lineTo(endPt.x - arrow.w, endPt.y + arrow.h);
        canvasContext.lineTo(endPt.x - arrow.w, endPt.y - arrow.h);
        canvasContext.closePath();
        canvasContext.fillStyle = "rgb(72,72,72)";
        canvasContext.stroke();
        canvasContext.fill();

        // restore the context to its untranslated/unrotated state
        canvasContext.restore();
    }

    function...