Как посчитать размер чёрных полос полноэкранного режима

Question

var ctx = document.getElementById('ctx').getContext('2d')
var canvas = document.getElementById('ctx')
var openFullscreen = function() {
  if (canvas.requestFullscreen) {
    canvas.requestFullscreen();
  } else if (canvas.webkitRequestFullscreen) { /* Safari */
    canvas.webkitRequestFullscreen();
  } else if (canvas.msRequestFullscreen) { /* IE11 */
    canvas.msRequestFullscreen();
  }
}
document.onmousedown = function() {
  openFullscreen()
}
setInterval(function() {
  ctx.clearRect(0, 0, 10000, 10000)
  ctx.fillStyle = 'blue'
  ctx.fillRect(0, 0, 10000, 10000)
  ctx.fillStyle = 'black'
  ctx.font = '30px Arial'
  ctx.fillText(canvas.getBoundingClientRect().x, 0, 30)
}, 1000 / 25)

body {
  margin: 0;
}

<canvas id="ctx" width="100px" height="100px" style="display: block;margin:auto;"></canvas>

при переходе через canvas.requestFullscreen() в полноэкранный режим появляются полосы по бокам экрана, размер которых нужно посчитать. canvas.getBoundingClientRect().x не помогает, так как подсчитывает расстояние самого элемента от границы окна. screen.availWidth, screen.width и window.innerWidth не меняют значений при переходе в полноэкранный режим. В примере, на синем квадрате отображается canvas.getBoundingClientRect().x , при нажатии на квадрат значение становится равно нулю, так как канвас занимает весь экран, однако чёрные полосы обрисовываются поверх канваса, так как на них ничего нельзя отобразить. Подскажите, как узнать размер этих полос? Их значение мне нужно знать для правильного позиционирования курсора на канвасе.

Answer 1

Как предложил Grundy, можно пересчитать перемножить разрешение игры, на разрешение экрана, и по максимальному соотношению высоты, получить ширину игры в полноэкранном режиме, а разницей, между новой ширеной и ширеной экрана, будут две полосы var scallingsiz = (window.innerHeight/gameheight*gamewidth-window.innerWidth)/2

<html>
<style>
body{
margin:0;
}
</style>
<canvas id="ctx" width="100px" height="100px" style="display: block;margin:auto;"></canvas>
<script>
var ctx = document.getElementById('ctx').getContext('2d')
var canvas = document.getElementById('ctx')
var openFullscreen=function() {
  if (canvas.requestFullscreen) {
    canvas.requestFullscreen();
  } else if (canvas.webkitRequestFullscreen) { /* Safari */
    canvas.webkitRequestFullscreen();
  } else if (canvas.msRequestFullscreen) { /* IE11 */
    canvas.msRequestFullscreen();
  }
}
document.onmousedown=function(){
openFullscreen()
}
var gamewidth=100
var gameheight=100
var scallingsiz = (window.innerHeight/gameheight*gamewidth-window.innerWidth)/2
setInterval(function(){
ctx.clearRect(0,0,10000,10000)
ctx.fillStyle='blue'
ctx.fillRect(0,0,10000,10000)
ctx.fillStyle='black'
ctx.font = '30px Arial'
ctx.fillText(-scallingsiz,0,30)
},1000/25)

</script>
</html>

БЛОГ НА HUSL

Как посчитать размер чёрных полос полноэкранного режима

Ответы (1 шт):