Работа с canvas и fullscreen mod

319
23 января 2017, 21:17

Доброго времени суток уважаемые знатоки! Есть некоторая неопределенность при с canvas и fullscreen... Есть следующий код:

function app_start() 
{ 
  canvas = document.getElementById('app_canvas'); 
  window.addEventListener("resize", resize); 
} 
 
function mouese_click(e) 
{ 
	full_screen(); 
} 
 
function full_screen() 
{ 
  if(canvas.requestFullscreen) 
    { 
      canvas.requestFullscreen(); 
    } 
    else if(canvas.webkitRequestFullscreen) 
    { 
      canvas.webkitRequestFullscreen(); 
    }  
    else if(canvas.mozRequestFullscreen) 
    { 
      canvas.mozRequestFullScreen(); 
    } 
} 
 
function resize(e) 
{ 
	if (is_fullscreen) 
	{ 
		canvas.width = window.innerWidth; 
	  	canvas.height = window.innerHeight; 
	} 
	else 
	{ 
		canvas.width = window.innerWidth - 22; 
	  	canvas.height = window.innerHeight - 22; 
	} 
}
#app_canvas:-webkit-full-screen { 
	height: 100%; 
    width: 100%; 
}
<body onload="app_start();"> 
	<canvas id="app_canvas"></canvas> 
</body>

Все вроде как просто, есть кнопка, мы на неё нажимаем и переводим canvas в fullscreen mod. И вот тут наступают проблемы:

1) Если использовать CSS и задавать размеры 100% :

* canvas не увеличивается, а растягивается, что приводит к "растяжению" всех элементов canvas. Что не круто... хотелось бы только размер canvas увеличить.
* Отрабатывает только увеличение по высоте, по ширине не срабатывает, но если задавать конкретными значениями то работает.

2) Если увеличивать размер canvas через задание высоты и ширины на прямую.

* Если то не fullscreen mod то при задании размеров window.innerWidth/window.innerHeight размеры превышают размеры окна и появляются скролы, что то же не круто, и по этому появляется магическое число 22 которое просто подогнано под конкретный случай, что тоже не круто.

Может кто знает как решить эти неопределенности с fullscreen mod для canvas "красиво"?

READ ALSO
Рекурсия JavaScript

Рекурсия JavaScript

Не могу понять почему получаеться 8? Как программа работает? Что за чем выполняеться? В ступор вводит 3 строчка return 1; Почему не вернется просто...

709
Не подключается скрипт на страницу Node.js

Не подключается скрипт на страницу Node.js

На странице indexejs не вызывется скрипт script

333
Подскажите скрипт что бы один объект преследовал другой используя фреймворк Phaser [требует правки]

Подскажите скрипт что бы один объект преследовал другой используя фреймворк Phaser [требует правки]

Подскажите скрипт что бы один объект преследовал другой используя фреймворк Phaser

255
Нужен ли сейчас underscrore?

Нужен ли сейчас underscrore?

Какие возможности underscore вы используете? Например, в нём есть функция eachЗачем она нужна, если теперь есть forEach, map в обычном js? Я так понимаю...

313