JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Angles on OUTSIDE corners of a polygon<br>Drag the Blue anchors.</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var isDown = false;
var startX;
var startY;

var PI2 = Math.PI * 2;
var points = []
points.push({
    x: 50,
    y: 100,
    r: 5
});
points.push({
    x: 150,
    y: 40,
    r: 5
});
points.push({
    x: 250,
    y: 80,
    r: 5
});
points.push({
    x: 180,
    y: 115,
    r: 5
});
var rectStrokeStyle = "black";
var dragPoint;

// draw everything

drawAll();


function drawAll() {

    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw the polygon
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (var i = 1; i < points.length; i++) {
        var c = points[i];
        ctx.lineTo(c.x, c.y);
    }
    ctx.closePath();
    ctx.strokeStyle = rectStrokeStyle;
    ctx.lineWidth = 2;
    ctx.stroke();

    // draw anchor points on each corner
    for (var i = 0; i < points.length; i++) {
        drawAnchor(points[i], "blue");
    }

    // draw the angle symbols on corners
    for (var i = 0; i < points.length - 2; i++) {
        drawAngleSymbol(points[i], points[i + 1], points[i + 2]);
    }
    // draw the last 2 angle symbols
    var n = points.length;
    drawAngleSymbol(points[n - 2], points[n - 1], points[0]);
    drawAngleSymbol(points[n - 1], points[0], points[1]);


}

function drawAnchor(point, color) {
    ctx.beginPath();
    ctx.arc(point.x, point.y, 8, 0, PI2);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
}

function drawAngleSymbol(pt1, pt2, pt3) {
    // calculate the angles
    var dx1 = pt1.x - pt2.x;
    var dy1 = pt1.y - pt2.y;
    var dx2 = pt3.x - pt2.x;
    var dy2 = pt3.y - pt2.y;
    var a1 = Math.atan2(dy1, dx1);
    var a2 = Math.atan2(dy2, dx2);
    // calculate the degree angle for...