JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<body>
    <canvas id="canvas" width="500" height="400" style="position:absolute;border:1px solid green;"></canvas>
    <div id="Maindiv">
        <div id="p1">1</div>
        <div id="p2">2</div>
        <div id="p3">3</div>
        <div id="p4">4</div>
    </div>
    <button type="button" id="draw" onClick="drawAngleSymbol()">Draw</button>
</body>

CSS

#Maindiv {
    width:500px;
    height:400px;
    border:1px solid red;
}
#p1 {
    width:10px;
    height:10px;
    background-color:pink;
    border-radius:10px;
    position:absolute;
    left:50px;
    top:50px;
    font-size:10px;
    text-align:center;
}
#p2 {
    width:10px;
    height:10px;
    background-color:pink;
    border-radius:10px;
    position:absolute;
    left:150px;
    top:50px;
    font-size:10px;
    text-align:center;
}
#p3 {
    width:10px;
    height:10px;
    background-color:pink;
    border-radius:10px;
    position:absolute;
    left:150px;
    top:150px;
    font-size:10px;
    text-align:center;
}
#p4 {
    width:10px;
    height:10px;
    background-color:pink;
    border-radius:10px;
    position:absolute;
    left:50px;
    top:150px;
    font-size:10px;
    text-align:center;
}

JavaScript

$(document).ready(function () {
    var c = document.getElementById('canvas');
    var ctx = c.getContext("2d");
    var a1 = parseInt($("#p1").css("left")) - 5;
    var a2 = parseInt($("#p1").css("top")) - 5;
    var b1 = parseInt($("#p2").css("left")) - 5;
    var b2 = parseInt($("#p2").css("top")) - 5;
    var c1 = parseInt($("#p3").css("left")) - 5;
    var c2 = parseInt($("#p3").css("top")) - 5;
    var d1 = parseInt($("#p4").css("left")) - 5;
    var d2 = parseInt($("#p4").css("top")) - 5;

    ctx.beginPath();
    ctx.moveTo(a1, a2)
    ctx.lineTo(b1, b2)
    ctx.lineTo(c1, c2)
    ctx.lineTo(d1, d2)
    ctx.lineTo(a1, a2)
    ctx.fillStyle = '#E6E0EC';
    ctx.fill();
    ctx.strokeStyle = "#604A7B";
    ctx.lineWidth = "3"
    ctx.stroke();
    ctx.closePath();
    $("#p1,#p2,#p3,#p4").draggable({
        drag: function () {

            a1 = parseInt($("#p1").css("left")) - 5;
            a2 = parseInt($("#p1").css("top")) - 5;
            b1 = parseInt($("#p2").css("left")) - 5;
            b2 = parseInt($("#p2").css("top")) - 5;
            c1 = parseInt($("#p3").css("left")) - 5;
            c2 = parseInt($("#p3").css("top")) - 5;
            d1 = parseInt($("#p4").css("left")) - 5;
            d2 = parseInt($("#p4").css("top")) - 5;

            ctx.clearRect(0, 0, 500, 500);
            createPath(a1, a2, b1, b2, c1, c2, d1, d2);
            
            ctx.fillStyle = '#E6E0EC';
            ctx.fill();
            ctx.strokeStyle = "#604A7B";
            ctx.lineWidth = "3"
            ctx.stroke();
        }

    });

    function createPath(a1,a2, b1, b2, c1, c2, d1, d2) {
        ctx.beginPath();
        ctx.moveTo(a1, a2)
        ctx.lineTo(b1, b2)
        ctx.lineTo(c1, c2)
        ctx.lineTo(d1, d2)
        ctx.lineTo(a1, a2)
        ctx.closePath();
    }
    

    function draw(a1, b1, c1, a2, b2, c2) {
        var dx1 = a1 - b1;
        var dy1 = a2 - b2;
        var dx2 = c1 - b1;
        var dy2 = c2 - b2;
        var ax1 =...