Quick and dirty L Shape bisector mockup for the Riddler

bisector.js

var handleSize = 5;
var width = 500, height = 500;
function init() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var shape = {x: 100, y: 300, X: 400, Y: 50, cornerX: 50, cornerY: 450};

    var drag = {inner: false, outer: false};
    
    canvas.addEventListener("mousedown", (e) => mouseDown(e, shape, drag), false);
    canvas.addEventListener("mouseup", (e) => mouseUp(drag), false);
    canvas.addEventListener("mousemove", (e) => {
        mouseMove(e, shape, drag);
        draw(ctx, shape);
    }, false);
}

function mouseDown(e, shape, drag) {
    var mousePos = [e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop];
    var innerCorner = [shape.x, shape.y];
    var outerCorner = [shape.X, shape.Y];

    if (checkCloseEnough(mousePos, innerCorner)) {
        drag.inner = true;
    } else if (checkCloseEnough(mousePos, outerCorner)) {
        drag.outer = true;
    }
}

function checkCloseEnough(p1, p2) {
    var x = p1[0] - p2[0];
    var y = p1[1] - p2[1];
    return (x * x + y * y <= handleSize * handleSize);
}

function mouseUp(drag) {
    drag.inner = false;
    drag.outer = false;
}

function mouseMove(e, shape, drag) {
    var mouseX = e.pageX - e.target.offsetLeft;
    var mouseY = e.pageY - e.target.offsetTop;

    if (drag.inner) {
        shape.x = mouseX;
        shape.y = mouseY;
    } else if (drag.outer) {
        shape.X = mouseX;
        shape.Y = mouseY;
    }

    if (shape.x > shape.X || shape.y < shape.Y) {
        if (drag.inner) {
            drag.inner = false;
            drag.outer = true;
        } else if (drag.outer) {
            drag.outer = false;
            drag.inner = true;
        }
    } else if (shape.x <= shape.cornerX) {
        shape.x = shape.cornerX + 1;
        drag.inner = false;
    } else if (shape.y >= shape.cornerY) {
        shape.y = shape.cornerY - 1;
        drag.inner = false;
    }

}

function draw(ctx, shape) {
    ctx.clearRect(0, 0, width, height);

    // cutout rect
    ctx.setLineDash([5, 3]);
    ctx.strokeRect(shape.x, shape.Y, shape.X - shape.x, shape.y - shape.Y);

    ctx.fillStyle = "#93C57C";
    ctx.beginPath();
        ctx.moveTo(shape.cornerX, shape.cornerY);
        ctx.lineTo(shape.cornerX, shape.Y);
        ctx.lineTo(shape.x, shape.Y);
        ctx.lineTo(shape.x, shape.y);
        ctx.lineTo(shape.X, shape.y);
        ctx.lineTo(shape.X, shape.cornerY);
    ctx.closePath();
    ctx.fill();
    ctx.setLineDash([]);
    ctx.stroke();
    drawHandles(ctx, shape);


    ctx.setLineDash([1, 7]);
    // find centers
    ctx.strokeStyle = "red";
    drawLine(ctx, [shape.x, shape.y], [shape.X, shape.Y]);
    drawLine(ctx, [shape.x, shape.Y], [shape.X, shape.y]);
    ctx.strokeStyle = "blue";
    drawLine(ctx, [shape.cornerX, shape.cornerY], [shape.X, shape.Y]);
    drawLine(ctx, [shape.cornerX, shape.Y], [shape.X, shape.cornerY]);
    // line between them
    ctx.setLineDash([]);
    ctx.strokeStyle = "black";
    var midRed = [(shape.x + shape.X) / 2, (shape.y + shape.Y) / 2];
    var midBlue = [(shape.cornerX + shape.X) / 2, (shape.cornerY + shape.Y) / 2];
    var midLine = Line(midRed, midBlue);
    var realLine = getRealLine(midLine, shape);
    drawLine(ctx, realLine[0], realLine[1]);
}

function getRealLine(line, shape) {
    var from;
    var y = getY(line, shape.cornerX);
    if (y < shape.cornerY) {
        from = [shape.cornerX, y];
    } else {
        from = [getX(line, shape.cornerY), shape.cornerY];
    }
    var to;
    y = getY(line, shape.X);
    if (y > shape.Y) {
        to = [shape.X, y];
    } else {
        to = [getX(line, shape.Y), shape.Y];
    }
    return [from, to];
}

function getX(line, y) {
   return (y - line.y1)/line.m + line.x1;
}

function getY(line, x) {
    return line.m * (x - line.x1) + line.y1;
}

function Line(p1, p2) {
    var slope = (p2[1] - p1[1])/(p2[0] - p1[0]);
    return {x1: p1[0], y1: p1[1], m: slope}
}

function drawLine(ctx, from, to) {
    ctx.beginPath();
    ctx.moveTo(from[0], from[1]);
    ctx.lineTo(to[0], to[1]);
    ctx.stroke();
}
   
function drawCircle(ctx, x, y, radius) {
    ctx.fillStyle = "#FF0000";
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
}

function drawHandles(ctx, shape) {
    drawCircle(ctx, shape.x, shape.y, handleSize);
    drawCircle(ctx, shape.X, shape.Y, handleSize);
}

// window.onload = init;
init();