如何使该画布网站具有响应能力？

Question

我将从代码开始：

let canvasEl = document.getElementById("main-canvas");
let canv = canvasEl.getContext("2d");
let screenWidth = screen.availWidth;
let screenHeight = screen.availHeight;
const back = "rgb(150, 250, 250)";

canvasEl.width = screenWidth;
canvasEl.height = screenHeight;

canv.beginPath();
canv.rect(0, 0, screenWidth, screenHeight);
canv.fillStyle = back;
canv.fill();

circles = [];

function populateCircles(amount, maxRadius) {
  for (let i = 0; i < amount; i++) {
    let centerCircleX = Math.random() * screenWidth;
    let centerCircleY = Math.random() * screenHeight;
    let radius = Math.random() * maxRadius;
    let rgb = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;

    circles.push({
      "position": [centerCircleX, centerCircleY],
      "radius": radius,
      "colour": rgb,
      "closeVal": 0
    }); +

    canv.beginPath();
    canv.arc(centerCircleX, centerCircleY, radius, 0, 2 * Math.PI);
    canv.fillStyle = rgb;
    canv.fill()
  }
}

function reDraw() {
  canv.clearRect(0, 0, canvasEl.width, canvasEl.height);
  canv.beginPath();

  canv.rect(0, 0, screenWidth, screenHeight);
  canv.fillStyle = back;
  canv.fill();

  for (let i = 0; i < circles.length; i++) {
    let size;

    if (circles[i]["closeVal"] !== 0) {
      size = circles[i]["closeVal"] * circles[i]["radius"]
    } else {
      size = circles[i]["radius"]
    }

    canv.beginPath();
    canv.fillStyle = circles[i]["colour"];
    canv.arc(circles[i]["position"][0], circles[i]["position"][1], size, 0, 2 * Math.PI);
    canv.fill();
  }
}

function euclideanDistance(pos1, pos2) {
  let [pos1X, pos1Y] = pos1;
  let [pos2X, pos2Y] = pos2;
  return Math.sqrt(Math.abs((pos1X - pos2X)) + Math.abs(pos1Y - pos2Y))
}

populateCircles(20, 100);

setInterval(reDraw, 10);

document.addEventListener("mousemove", function(e) {
  const mouseDistanceMin = 20;
  for (let i = 0; i < circles.length; i++) {
    let currentCircle = circles[i];
    let xMouse = e.clientX;
    let yMouse = e.clientY;

    let distance = euclideanDistance(currentCircle["position"], [xMouse, yMouse]);
    if (distance < mouseDistanceMin) {
      circles[i]["closeVal"] = distance / mouseDistanceMin
    } else {
      circles[i]["closeVal"] = 0
    }
  }
});

body {
  overflow-y: hidden;
}

<canvas id="main-canvas" style="max-width: 100%; max-height: calc(100% - 20px);"></canvas>

目前，它仅在全屏模式下起作用，只要我调整窗口大小，就会出现白条。除了画布之外，我还有别的方法吗？而且，调整大小时，鼠标位置会完全关闭。还有另一种获取鼠标位置的方法吗？谢谢。