rects

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rectangle Drawer</title>
</head>

<body>
  <form id="rectForm">
    <label for="R1X1">R1X1:</label>
    <input type="number" id="R1X1" name="R1X1"><br>
    <label for="R1Y1">R1Y1:</label>
    <input type="number" id="R1Y1" name="R1Y1"><br>
    <label for="R1X2">R1X2:</label>
    <input type="number" id="R1X2" name="R1X2"><br>
    <label for="R1Y2">R1Y2:</label>
    <input type="number" id="R1Y2" name="R1Y2"><br>
    <label for="R2X1">R2X1:</label>
    <input type="number" id="R2X1" name="R2X1"><br>
    <label for="R2Y1">R2Y1:</label>
    <input type="number" id="R2Y1" name="R2Y1"><br>
    <label for="R2X2">R2X2:</label>
    <input type="number" id="R2X2" name="R2X2"><br>
    <label for="R2Y2">R2Y2:</label>
    <input type="number" id="R2Y2" name="R2Y2"><br>
    <button type="button" onclick="generateCoordinates();drawRectangles()">Draw Rectangles</button>:<input type="text"
      id="result"> | <input type="text" id="result2">
  </form>
  <canvas id="rectCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

  <script>
    function generateCoordinates() {
      document.getElementById('R1X1').value = Math.floor(Math.random() * 500);
      document.getElementById('R1Y1').value = Math.floor(Math.random() * 500);
      document.getElementById('R1X2').value = Math.floor(Math.random() * 500);
      document.getElementById('R1Y2').value = Math.floor(Math.random() * 500);
      document.getElementById('R2X1').value = Math.floor(Math.random() * 500);
      document.getElementById('R2Y1').value = Math.floor(Math.random() * 500);
      document.getElementById('R2X2').value = Math.floor(Math.random() * 500);
      document.getElementById('R2Y2').value = Math.floor(Math.random() * 500);

      if (+R1X1.value >= +R1X2.value || +R1Y1.value >= +R1Y2.value ||
        +R2X1.value >= +R2X2.value || +R2Y1.value >= +R2Y2.value) {
        generateCoordinates();
      }
    }
    function drawRectangles() {

      let p = console.log;

      const R1X1 = parseInt(document.getElementById('R1X1').value);
      const R1Y1 = parseInt(document.getElementById('R1Y1').value);
      const R1X2 = parseInt(document.getElementById('R1X2').value);
      const R1Y2 = parseInt(document.getElementById('R1Y2').value);
      const R2X1 = parseInt(document.getElementById('R2X1').value);
      const R2Y1 = parseInt(document.getElementById('R2Y1').value);
      const R2X2 = parseInt(document.getElementById('R2X2').value);
      const R2Y2 = parseInt(document.getElementById('R2Y2').value);

      const canvas = document.getElementById('rectCanvas');
      const ctx = canvas.getContext('2d');

      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw first rectangle
      ctx.beginPath();
      ctx.rect(R1X1, R1Y1, R1X2 - R1X1, R1Y2 - R1Y1);
      ctx.stroke();

      // Draw second rectangle
      ctx.beginPath();
      ctx.rect(R2X1, R2Y1, R2X2 - R2X1, R2Y2 - R2Y1);
      ctx.stroke();

      if (R1X1 < R2X2 && R1X2 > R2X1 && R1Y1 < R2Y2 && R1Y2 > R2Y1) {
        result.value = "The rectangles intersect";
      } else {
        result.value = "The rectangles do not intersect";
      }

      // Check for overlap
      const overlap = !(R1X2 <= R2X1 || R1X1 >= R2X2 || R1Y2 <= R2Y1 || R1Y1 >= R2Y2);

      if (overlap) {
        document.getElementById('result2').value = "The rectangles overlap.";
      } else {
        document.getElementById('result2').value = "The rectangles do not overlap.";
      }
    }
  </script>
</body>

</html>