Good day, dear experts! There is some uncertainty with the canvas and fullscreen ... There is the following code:

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>

Everything seems to be simple, there is a button, we click on it and translate the canvas into fullscreen mod. And here comes the problem:

1) If you use CSS and set the size to 100%:

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

2) If you increase the size of the canvas through the task of height and width on the line.

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

Maybe someone knows how to solve these uncertainties with fullscreen mod for canvas "beautifully"?

    0