I need this to adjust the position of monitors.

showCenterOfWindow.js

document.body.style.margin = "0";
document.body.style.overflow = "hidden";

const windowSize = {x:window.innerWidth, y:window.innerHeight};

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.setAttribute("width", windowSize.x);
canvas.setAttribute("height", windowSize.y);
document.body.appendChild(canvas);

function setCanvasSize(width = window.innerWidth, height = window.innerHeight) {
  windowSize.x = window.innerWidth;
  windowSize.y = window.innerHeight;
  canvas.setAttribute("width", windowSize.x);
  canvas.setAttribute("height", windowSize.y);
}
function fillScreen(color = "black") {
  ctx.fillStyle = color;
  ctx.fillRect(0,0,windowSize.x,windowSize.y);
}
function drawCenterLines(color = "white") {
  ctx.fillStyle = color;
  ctx.strokeStyle = color;
  ctx.beginPath();
  ctx.moveTo(windowSize.x/2-1,0);
  ctx.lineTo(windowSize.x/2,0);
  ctx.lineTo(windowSize.x/2,windowSize.y);
  ctx.lineTo(windowSize.x/2-1,windowSize.y);
  ctx.lineTo(windowSize.x/2-1,0);
  ctx.moveTo(0,windowSize.y/2-1);
  ctx.lineTo(windowSize.x,windowSize.y/2-1);
  ctx.lineTo(windowSize.x,windowSize.y/2);
  ctx.lineTo(0,windowSize.y/2);
  ctx.fill();
}
function drawBorderLines(color = "white") {
  ctx.strokeStyle = color;
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(windowSize.x,0);
  ctx.lineTo(windowSize.x,windowSize.y);
  ctx.lineTo(0,windowSize.y);
  ctx.lineTo(0,0);
  ctx.stroke();
}

window.addEventListener("load", function() {
  setCanvasSize();
  fillScreen();
  drawCenterLines();
  drawBorderLines();
});
window.addEventListener("resize", function() {
  setCanvasSize();
  fillScreen();
  drawCenterLines();
  drawBorderLines();
});