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




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


// dx, dy: offset since last update
function update_coordinates_circle(dx, dy) {
    var _cx = this.attr("cx"),
        _cy = this.attr("cy"),
        new_x = _cx + dx,
        new_y = _cy + dy,
        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 > this.paper.width)) new_x = _cx;
    if ((new_y < 0) || (new_y > this.paper.height)) new_y = _cy;

    // update circle coords
    this.attr({
        cx: new_x,
        cy: new_y
    });

    // update the referenced point
...