Search code examples
javascripthtmlhtml5-canvas

why canvas is not behaving properly?

I want CANVAS (gray part) to always cover the screen.
But it covers too much.
What to do?
(I don't want to use CSS)

resize();

function resize() {
  document.getElementById("can").style.width = window.innerWidth + "px";
  document.getElementById("can").style.height = window.innerHeight + "px";
}
body {
  margin: 0;
  padding: 0;
}

#can {
  margin: 0;
  padding: 0;
  background-color: #eee;
}
<body onresize="resize();">
  <canvas id="can" />
</body>

Solution

  • You need to add display: block; css to your canvas.

    resize();

function resize() {
  document.getElementById("can").style.width = window.innerWidth + "px";
  document.getElementById("can").style.height = window.innerHeight + "px";
}

window.addEventListener('resize', resize);
    body {
  margin: 0;
  padding: 0;
}

#can {
  display: block;
  margin: 0;
  padding: 0;
  background-color: #eee;
}
    <canvas id="can" />