Почему есть поля, когда мой холст в полноэкранном режиме?

Question

Я исследовал создание объектов в полноэкранном режиме и не могу понять, почему вокруг холста есть черные поля, когда я вызываю requestFullscreen. Почему существуют поля и как я должен исправить свой код, чтобы холст действительно покрывал весь экран, когда я вызываю requestFullscreen?

var c = document.getElementById("myCanvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
var ctx = c.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, c.width, c.height);
var elem = document.getElementById("myCanvas");

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

* {
  margin: 0;
  padding: 0;
}
/* to remove the top and left whitespace */

html,
body {
  width: 100%;
  height: 100%;
}
/* just to be sure these are full screen*/

<canvas id="myCanvas"></canvas>

<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

Answer 1

Как сказал Кайидо, вы устанавливаете размер холста при загрузке страницы, поэтому его необходимо пересчитать один раз на весь экран. Вы можете заключить свои логи рисования c в функцию и вызывать эту функцию каждый раз, когда изменяется полноэкранный статус:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Get browser-specific method and event name
var fullscreenProps = whichFullscreen(c);

// Draw on page load
drawCanvas();
// Redraw when going into or leaving fullscreen
c.addEventListener(fullscreenProps.eventName, drawCanvas);

function drawCanvas() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  ctx.fillStyle = "#00FF00";
  ctx.fillRect(0, 0, c.width, c.height);
}

function openFullscreen() {
  if (fullscreenProps.method) {
    fullscreenProps.method.call(c)
      .catch(function(err) {
        console.log("Going fullscreen failed");
        console.log(err);
      });
  } else {
    console.log("Fullscreen not available");
  }
}

function whichFullscreen(el) {
  if (el.requestFullscreen) {
    return { method: el.requestFullscreen, eventName: "fullscreenchange" };
  }
  if (el.mozRequestFullScreen) {
    return { method: el.mozRequestFullScreen, eventName: "mozfullscreenchange" };
  }
  if (el.webkitRequestFullscreen) {
    return { method: el.webkitRequestFullscreen, eventName: "webkitfullscreenchange" };
  }
  if (el.msRequestFullscreen) {
    return { method: el.msRequestFullscreen, eventName: "msfullscreenchange" };
  }
  return { method: null, eventName: null };
}