overlap finder

by frogggeee McFrogggeee

HTML

<canvas id = "canvas" style = "border: 1px solid" width = 480 height = 360>
  
</canvas>

JavaScript

ctx = document.getElementById("canvas").getContext("2d");
let rect1;
let rect2;
let overlap = [0, 0, 0, 0];
let mx = 0;
 let my = 0; 
document.addEventListener("mousemove", function moved(e) {
  const rect = e.target.getBoundingClientRect();
  mx = e.clientX - rect.left;
  my = e.clientY - rect.top;
});
function render() {
ctx.clearRect(0, 0, 1000, 1000);
rect1 = [200, 200, 88, 88];
rect2 = [mx, my, 33, 33]

ctx.lineWidth = 1;
ctx.rect(...rect1);
ctx.stroke();
ctx.beginPath();
ctx.rect(...rect2);
ctx.lineWidth = 1;
ctx.stroke();

if ((rect1[2] + rect1[0]) - rect2[0] <= rect1[2]) {
  overlap[0] = rect2[0];
  overlap[2] = (rect1[2] + rect1[0]) - rect2[0];
} else if ((rect2[2] + rect2[0]) - rect1[0] <= rect2[2]) {
  overlap[0] = rect1[0];
  overlap[2] = (rect2[2] + rect2[0]) - rect1[0];
} 
if (overlap[2] < 0){
	overlap[2] = 0;
}
if (overlap[2] > rect2[2]){
	overlap[2] = rect2[2];
}
if (overlap[2] > rect1[2]){
	overlap[2] = rect1[2];
}
if ((rect1[3] + rect1[1]) - rect2[1] <= rect1[3]) {
  overlap[1] = rect2[1];
  overlap[3] = (rect1[1] + rect1[3]) - rect2[1];
} else if ((rect2[3] + rect2[1]) - rect1[1] <= rect2[3]) {
  overlap[1] = rect1[1];
  overlap[3] = (rect2[1] + rect2[3]) - rect1[1];
} 
if (overlap[3] < 0){
	overlap[3] = 0;
  overlap[2] = 0;
}
if (overlap[3] > rect2[3]){
	overlap[3] = rect2[3];
}
if (overlap[3] > rect1[3]){
	overlap[3] = rect1[3];
}
if (overlap[2] == 0) {
overlap[3] = 0;
}

ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 0;
ctx.rect(...overlap);
ctx.fillStyle = "black";
ctx.fill();
}
setInterval(render, 10);