JSFiddle - React, Tailwind, and code Playground

HTML

<body style=" background: lightblue;">
  <button style="width:100%;height:50px;" onclick="stopTimer()">stop</button>
  <h1 style="width:100%" id="errors">
  </h1>
  <canvas id="canvas" width="801px" height="801px" style="background: #fff;     magrin:20px;"></canvas>

</body>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var events = [];
var x = [6, 8, 10, 10, 12, 12, 14, 14, 16, 18]
var y = [2, 3, 2, 4, 3, 5, 2, 4, 3, 2]

var pairs;
var lines = [];




function fillGrid(x, y, color) {
  if (color) {
    context.fillStyle = "#FF0000";
  } else {
    context.fillStyle = "#121214";
  }
  context.fillRect(x * 32, y * 32, 32, 32);
}

function drawAxis() {
  context.fillStyle = "black";
  context.fillRect(0, 8 * 32, 800, 32);
  for (var i = 0; i < x.length; i++) {
    fillGrid(x[i], y[i]);
  }
}

function generateEvents() {
  events = [];
  for (var i = 0; i < 10; i++) {
    var random = Math.floor((Math.random() * 45464) % 12) + 6;
    events.push(random);
    fillGrid(random, 8, true);
  }

}

function connect() {
  events.sort(function(a, b) {
    return a - b;
  });
  for (var i = 0; i < events.length; i++) {

    if (events[i] >= (pairs[0][0]).split("-")[0])
      pairs[0] = pairs[0].reverse();
    var assoc = pairs[0].splice(0, 1)[0]
    if (!pairs[0].length)
      pairs.splice(0, 1);

    makeLine(events[i], 8, assoc.split("-")[0], assoc.split("-")[1]);

    function makeLine(x1, y1, x2, y2) {
      context.beginPath();
      context.moveTo(32 * x1 + 16, 32 * y1 + 16);
      context.lineTo(32 * x2 + 16, 32 * y2 + 16);
      context.stroke();
      checkCroixement(32 * x1 + 16,32 * y1 + 16,32 * x2 + 16,32 * y2 + 16);
      lines.push({"x1":32 * x1 + 16,"y1":32 * y1 + 16,"x2":32 * x2 + 16,"y2":32 * y2 + 16});
    }
  }
}
var errors = 0;
var total =0;
function checkCroixement(x1,y1,x2,y2){
	for(var i=0;i<lines.length;i++)
  	if(lineIntersect(x1,y1,x2,y2,lines[i].x1,lines[i].y1,lines[i].x2,lines[i].y2)){
    	alert(); // stop animation to see the problem
      errors ++;
      }
}
function clear() {
  context.clearRect(0, 0, 800, 800);
}
function lineIntersect(x1,y1,x2,y2, x3,y3,x4,y4) {
    var x=((x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4))/((x1-x2)*(y3-y4)-(y1-y2)*(x3-x4));
    var...