JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = 300,
    height = 300,
    paper_offset = 50,
    maxX = width,
    maxY = height,
    paper = Raphael(paper_offset, paper_offset, 300, 300),
    dragging;

make_path([100, 100], [200, 100], [200, 200], [100, 200], "green");

// reset 'dragging' to avoid initial drag
dragging = null;


// some math to determine if a point is between two other points, within some threshold
// based on: http://stackoverflow.com/questions/328107/how-can-you-determine-a-point-is-between-two-other-points-on-a-line-segment
function isBetween(a, b, c) {
    var x1 = a[1],
        x2 = b[1],
        x3 = c[1],
        y1 = a[2],
        y2 = b[2],
        y3 = c[2],
        THRESHOLD = 1000;

    var dotproduct = (x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1);
    if (dotproduct < 0) return false; // early return if possible

    var squaredlengthba = (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1);
    if (dotproduct > squaredlengthba) return false; // early return if possible

    var crossproduct = (y3 - y1) * (x2 - x1) - (x3 - x1) * (y2 - y1);
    if (Math.abs(crossproduct) <= THRESHOLD) return true;
    else return false;
}


function global_mousemove(e) {
    if (dragging) {
        handle_mousemove_circle.call(dragging, e);
    }
}


function global_mouseup(e) {
    dragging = null;
}


if (document.addEventListener) {
    document.addEventListener("mousemove", global_mousemove, false);
    document.addEventListener("mouseup", global_mouseup, false);
} else {
    document.attachEvent('onmousemove', global_mousemove);
    document.attachEvent('onmouseup', global_mouseup);
}


// move circle to given coordinates
function update_circle_xy(new_x, new_y) {
    var point = this.data("point"),
        path = this.data("path");

    // don't follow the mouse outside the canvas, we don't want to lose the point
    if (new_x <= 0) {
        new_x = 0;
    } else if (new_x >= maxX) {
        new_x = maxX;
    }

    if (new_y < 0) {
        new_y = 0;
    } else if (new_y > maxY) {
...