3

This subject has been asked and answered many times but I tried almost all solutions given but non fixes my case. I have a square canvas element inside a div that extends to cover all the available screen. When the screen is in landscape mode we want the user to vertically scroll the canvas drawing to view it. This works perfectly. When the screen resizes or changes orientation to portrait we want the user to scroll the canvas drawing horizontally. This also works as intended. But as soon as the user resizes (even by one pixel) the screen, a vertical scrollbar appears that only moves the canvas drawing by a few pixels. By reloading the page (keeping the same size) the vertical scrollbar disappears, very strange. Also in the transition between portrait and landscape, there is a browser instability.

I already spent a weekend trying various methods to solve the problem and wrote a small program that shows the strange appearance of the scrollbar. Please help. CSS is not my strong point.

var canvasSize = 0;
var ctx;
var canvas;

function init() {
  canvas = document.getElementById('myCanvas');
  if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    // I add listeners to dynamically redraw the canvas when the user changes orientation/size
    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);
    resizeCanvas();
  } else {
    alert("ERROR:  APPLICATION CANNOT RUN ON THIS DEVICE");
    return;
  }
}

function resizeCanvas() {
  let viewPortWidth = document.getElementById("radarScreen").clientWidth;
  let viewPortHeight = document.getElementById("radarScreen").clientHeight;
  let portaitMode = (viewPortHeight > viewPortWidth) ? true : false;

  if (portaitMode) {
    // IN PORTAIT MODE I WANT TO HAVE HORIZONTAL SCROLLBAR TO VIEW THE HIDDEN PART OF THE CANVAS
    //  UNFORTUNATELLY A GET ALSO A VERTICAL SCROLLBAR THAT MOVES THE CANVAS A FEW PIXELS UP/DOWN
    console.log("portait mode ON");
    canvas.width = viewPortHeight;
    canvas.height = viewPortHeight;
  } else { /* landscapeMode */
    //  IN LANDSCAPE MODE I WANT TO HAVE A VERTICAL SCROLLBAR TO VIEW THE HIDDEN PART OF THE CANVAS
    //  UNFORTUNATELLY A GET ALSO A HORIZONTAL SCROLLBAR THAT MOVES THE CANVAS A FEW PIXELS UP/DOWN     
    canvas.width = viewPortWidth;
    canvas.height = viewPortWidth;
  }
  // INSPECTING THE HTML GIVES NO CLEW WHERE THESE SCROLLBARS ARE CREATED
  canvasSize = canvas.width;

  // now we need to redraw the canvas
  ctx.clearRect(0, 0, canvasSize, canvasSize);

  ctx.strokeStyle = "black";
  ctx.lineWidth = 0.2 * canvasSize;
  ctx.beginPath();
  ctx.rect(0, 0, canvasSize, canvasSize);
  ctx.stroke();

  ctx.font = "80px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "center";
  if (portaitMode) ctx.fillText("Portrait ", canvasSize / 2, canvasSize / 4);
  else ctx.fillText("Landscape ", canvasSize / 2, canvasSize / 4);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

#radarScreen {
  display: block;
  height: 100%;
  width: 100%;
}

canvas {
  background-color: #777;
}
<body onload='init()'>
  <!-- RADAR SCREEN CANVAS SECTION -->
  <div id="radarScreen">
    <canvas id="myCanvas"></canvas>
  </div>
</body>
disinfor
  • 10,865
  • 2
  • 33
  • 44
Panos Kontogiannis
  • 73
  • 6
  • 1
    Thank you @disinfor for editing my question creating the runnable code snippet. Now I also learned who to do it! The code snippet only shows the problem, if run full-page. Various browsers render differently but the problem persists. Inspecting the elements, it looks as if the unwanted and useless vertical scrollbar is part of the canvas and most probably created by it. – Panos Kontogiannis Dec 06 '21 at 08:45

1 Answers1

0

I am not really sure what is causing the scroll; bar to appear, but this is a work around that seems to solve the issue.

#radarScreen {
  display: block;
  height: 100%;
  width: calc(100% - 1px);
}