JSFiddle - React, Tailwind, and code Playground

by Richard Morris

HTML

<p>The first click will construct a region around the point.
The second click will add a new line.
    Blue points are the points clicked. Red points are all the solutions found. Green points are solutions around the solution. Orange is the constructed polygon.</p>
<canvas id="canvas" width=300 height=300></canvas>

CSS

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

JavaScript

// canvas and mousedown related variables
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();

// save canvas size to vars b/ they're used often
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

// define the grid area
// lines can extend beyond grid
var gridRect = {
    x: 50,
    y: 50,
    width: 200,
    height: 200
}

// list of lines created
// each line is define by three numbers a, b, c
// with a x + b y + c >= 0
var lines = new Array();

// add the lines for the bounding rectangle
var line1 = { a : 1, b : 0, c : -50 };  // first line is x - 50 >= 0
var line2 = { a : -1, b : 0, c : 250 };  // first line is  -x + 250 >= 0
var line3 = { a : 0, b : 1, c : -50 };  // first line is y - 50 >= 0
var line4 = { a : 0, b : -1, c : 250 };  // first line is  -y + 250 >= 0
lines.push(line1,line2,line3,line4);

// list of all solutions 
var allSolutions = new Array();
var refinedSols = new Array();
var polySols = new Array();

findAllIntersections();
draw();

// Draw a single line
function drawLine(line) {
  var points = new Array();
  // find the intersecetions with the boinding box
  // lhs
  // a * 0 + b * y + c = 0  
    if( line.b != 0 ) {
        var y = -line.c / line.b;
        if( y >= 0 && y <= canvasHeight ) 
            points.push([0,y]);
    }
  // rhs
  // a * canvasWidth + b * y + c = 0  
    if( line.b != 0 ) {
        var y = ( - line.a * canvasWidth - line.c )/ line.b;
        if( y >= 0 && y <= canvasHeight ) 
            points.push([canvasWidth,y]);
    }
  // top
  // a * x + b * 0 + c = 0  
    if( line.a != 0 ) {
        var x = -line.c / line.a;
        if( x > 0 && x < canvasWidth ) 
            points.push([x,0]);
    }
  // bottom
  // a * x + b * canvasHeight + c = 0  
    if( line.a != 0 ) {
  ...