JSFiddle - React, Tailwind, and code Playground

by msmini5

HTML

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

CSS

.myCanvasStyle
{
    border: 1px solid gray;
    width: 350px;
    height: 200px
}

JavaScript

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: 75,
            r: 15
        };
            
            drawCircle(ctx, circle1, "1");
            drawCircle(ctx, circle2, "2"); 
        
        var ptCircle1 = getPointOnCircle(circle1.r, circle1, circle2);
        var ptCircle2 = getPointOnCircle(circle2.r, circle2, circle1);
        
            drawLine(ctx, ptCircle1, ptCircle2);
        
            drawArrow(ctx, ptCircle1, ptCircle2);
        }
}

function drawArrow(canvasContext, originPt, endPt)
{    
    var angleInDegrees = getAngleBetweenPoints(originPt, endPt);
    
    var width = 10;
    var height = 10  * (Math.sqrt(3)/2);
    
    canvasContext.beginPath();
    // first save the untranslated/unrotated context
    canvasContext.save();
        
    // move the rotation point to the center of the rect
    canvasContext.translate(endPt.x - height/2, endPt.y);
    // rotate the rect
    canvasContext.rotate((angleInDegrees + 90) * Math.PI/180);
    
    canvasContext.moveTo(0, -height / 2);
    
    
    /*canvasContext.lineTo(0, (-2/3)*height);
    canvasContext.lineTo(width / 2, height / 3);
    canvasContext.lineTo(-width / 2, height / 3);*/
    
    canvasContext.lineTo(width / 2, height / 3);
    canvasContext.lineTo(-width / 2, height / 3);
    canvasContext.lineTo(0, -height / 2);
        
    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(); //começa ou reinicia o desenho de algo       
   ...