Изменение размера холста при изменении размера экрана

Question

Как сделать так, чтобы canvas реагировал на изменение размера экрана пользователем?Просто использование window.innerHeight / Width делает его полноэкранным, но экран не реагирует, что мне и нужно.Также вы можете создать функцию внутри функции и вызвать ее позже?

window.addEventListener('load', (event) => {
   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');

  function screenSize() {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
  }

});


window.addEventListener('resize', screenSize);

Answer 1

option1) измените свой список загрузчиков событий на это и удалите прослушиватель событий изменения размера

window.addEventListener('load', (event) => {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  function screenSize() {
    canvas.height = "100vh";
    canvas.width = "100vw";
  }
});

options2) определите функцию screenSize из списка загрузчиков событий

window.addEventListener('load', (event) => {
   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
});

function screenSize () {
  const canvas = document.getElementById("myCanvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListner("resize", screenSize)