JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div id="canvas" oncontextmenu="return false;"></div>

CSS

#canvas {
    width:300px;
    height:300px;
    border:2px solid grey;
    margin: 10px auto;
}

JavaScript

var border_width = 2;
width = document.getElementById('canvas').offsetWidth - (2 * border_width),
height = document.getElementById('canvas').offsetHeight - (2 * border_width),
paper = Raphael("canvas", width, height);

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

var 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;
}


// at start of drag, reset any previous dx/dy to 0
function dragstart() {
    this.dx = this.dy = 0;
}


// dx, dy: offset from start of drag
function dragmove(dx, dy) {
    this.update(dx - (this.dx || 0), dy - (this.dy || 0));
    this.dx = dx;
    this.dy = dy;
}

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);
    }  

// dx, dy: offset since last update
function update_coordinates_circle(dx, dy) {
  ...