JSFiddle - React, Tailwind, and code Playground

by DivMaster

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://www.bgt.gr/assets/js/fabric.min.js?v=3.6.2"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

<div id="p"></div>
<canvas id="c" width="600" height="400"></canvas>

CSS

canvas {
  border: 1px solid;
}

JavaScript

// function to check if line exists in polygon
function isinPolygonFirst(points, longitude_x, latitude_y) {
  vertices_y = new Array();
  vertices_x = new Array();
  var r = 0;
  var i = 0;
  var j = 0;
  var c = 0;
  var point = 0;

  for (r = 0; r < points.length; r++) {
    vertices_y.push(points[r].y);
    vertices_x.push(points[r].x);
  }
  points_polygon = vertices_x.length;
  for (i = 0, j = points_polygon; i < points_polygon; j = i++) {
    point = i;
    if (point == points_polygon)
      point = 0;
    if (((vertices_y[point] > latitude_y != (vertices_y[j] > latitude_y)) && (longitude_x < (vertices_x[j] - vertices_x[point]) * (latitude_y - vertices_y[point]) / (vertices_y[j] - vertices_y[point]) + vertices_x[point])))
      c = !c;
  }
  return c;
}
// other function to check if line exist in polygon 

function isinPolygonSecond(points, x, y) {

  cornersX = new Array();
  cornersY = new Array();

  for (r = 0; r < points.length; r++) {
    cornersX.push(points[r].x);
    cornersY.push(points[r].y);
  }

  var i, j = cornersX.length - 1;
  var odd = false;

  var pX = cornersX;
  var pY = cornersY;

  for (i = 0; i < cornersX.length; i++) {
    if ((pY[i] < y && pY[j] >= y || pY[j] < y && pY[i] >= y) &&
      (pX[i] <= x || pX[j] <= x)) {
      odd ^= (pX[i] + (y - pY[i]) * (pX[j] - pX[i]) / (pY[j] - pY[i])) < x;
    }

    j = i;
  }

  return odd;
}

var canvas = new fabric.Canvas("c", {
  selection: false
});

var points = [];

var polygon = new fabric.Polygon([
  new fabric.Point(150, 50),
  new fabric.Point(250, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150),
  new fabric.Point(50, 250),
]);

polygon.on("modified", function() {
  //document.getElementById("p").innerHTML = JSON.stringify(this)+ "<br>";
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points")
    .map(function(p) {
      return new fabric.Point(
        p.x - polygon.pathOffset.x,
        p.y - polygon.pathOffset.y);
    })
   ...