JSFiddle - React, Tailwind, and code Playground

by warriormole

HTML

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

CSS

.keeperCanvas
{
    border: 1px solid black;
}

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: 30
            };

            var circle2 = {
                x: 300,
                y: 250,
                r: 30
            };
            
            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, p2) {    
        var angle = getAngleBtwPoints(ptArrow, p2);

        // first save the untranslated/unrotated context
        canvasContext.save();        
        
        // move the rotation point to the center of the rect    
        canvasContext.translate(ptArrow.x, ptArrow.y);        
        // rotate the rect
       canvasContext.rotate(angle);

        canvasContext.beginPath();
        canvasContext.moveTo(0,0);
        canvasContext.lineTo( 0, -arrow.h);
        canvasContext.lineTo( arrow.w, 0);
        canvasContext.lineTo( 0, +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 drawCircle(canvasContext, circle, text) {
        canvasContext.beginPath();...