JSFiddle - React, Tailwind, and code Playground

HTML

<div class="coords"><p>X: <span class="xcoord"></span></p><p>Y: <span class="ycoord"></span></p></div>
    <div class="drawingArea">
        <span class="markings A"></span>
        <span class="markings B"></span>
        <span class="markings C"></span>
        <canvas id="myCanvas" width="410" height="410">Your browser does not have support for Canvas. You should see:</canvas>
    </div>

CSS

* { margin: 0; }
        * { padding: 0; }

        span.markings {
            position: absolute;
        }

        div.drawingArea {
            margin: 50px 0 0 10px;
            padding: 0;
            width: 500px;
            height: 500px;
            position: relative;
            background: #ccc;
        }
        .coords { position: absolute; top: 0; left: 200px; }
        .coords p { position: relative; }
        .xcoord, .ycoord {  font-weight: bold; color: red; }
        #myCanvas { background: #eee; }

JavaScript

$(document).ready(function(){
    // Just for dev purposes.. show X and Y coords when inside drawingArea
    $('.drawingArea').mousemove(function(e){
        $('.xcoord').html(e.pageX -10); // subtract 10 for margin left is 10
        $('.ycoord').html(e.pageY -50); // subtract 40 bc margin top is 40
    });

    draw();

    function draw()
    {
        // Initialize context
        createContext('2d');

        // Set the style properties.
        context.fillStyle   = '#fff';
        context.strokeStyle = '#FF9900';
        context.lineWidth   = 5;

        // Set initial positions and lengths
        pts = {};
        pts.AXLoc = 60;
        pts.AYLoc = 40;
        pts.BXLoc = 360;
        pts.BYLoc = 40;
        pts.CXLoc = 100;
        pts.CYLoc = 340;

        // Get difference between points
        vector = {};
        vector.Ax = Math.abs(pts.AXLoc-pts.BXLoc);
        vector.Ay = Math.abs(pts.AYLoc-pts.BYLoc);
        vector.Bx = Math.abs(pts.BXLoc-pts.CXLoc);
        vector.By = Math.abs(pts.BYLoc-pts.CYLoc);
        vector.Cx = Math.abs(pts.CXLoc-pts.AXLoc);
        vector.Cy = Math.abs(pts.CYLoc-pts.AYLoc);

        console.log("ax" + vector.Ax);
        console.log("ay" + vector.Ay);
        console.log("bx" + vector.Bx);
        console.log("by" + vector.By);
        console.log("cx" + vector.Cx);
        console.log("cy" + vector.Cy);

        // Find the magnitude of each vector
        vector.magA = Math.sqrt((Math.pow((vector.Ax), 2) + 
                                 Math.pow((vector.Ay), 2)));
        vector.magB = Math.sqrt((Math.pow((vector.Bx), 2) + 
                                 Math.pow((vector.By), 2)));
        vector.magC = Math.sqrt((Math.pow((vector.Cx), 2) + 
                                 Math.pow((vector.Cy), 2)));
console.log("maga" + vector.magA);
console.log("magb" + vector.magB);
console.log("magc" + vector.magC);
        
        // Cos A = (A.C) / sqrt(magnitude of A) x (magnited of C)
        // This should return...