Масштабировать холст HTML до размера окна браузера, но не масштабировать элементы на холсте

Question

Есть ли способ масштабировать ваш HTML-холст до ширины / высоты окна браузера, но не масштабировать содержимое в нем? Скажем, я создавал астероиды и хочу использовать все окно браузера, но не хочу, чтобы камни и корабли увеличивались / уменьшались при изменении размера окна.

Answer 1

1. Не используйте CSS для масштабирования вашего холста. Это позволит масштабировать пиксели на холсте вверх / вниз.

2. Вместо этого следите за событием resize в соответствующем элементе (например, в окне), а затем соответствующим образом измените свойства .width и .height холста в JavaScript. Это изменит количество пикселей, которые вы рисуете.

3. Продолжайте использовать те же команды рисования фиксированного размера, которые вы всегда используете. Объект останется на экране того же размера в пикселях.

4. Чтобы сохранить содержимое по центру экрана, вы можете использовать 0,0 как центр холста, используя translate() в контексте сразу после изменения его размера. Например:

   var ctx = document.querySelector('#mycanvas').getContext('2d');
   window.addEventListener('resize',function(){
     var width  = calculateDesiredWidth();  // your code here
     var height = calculateDesiredHeight(); // your code here
     ctx.canvas.width  = width;
     ctx.canvas.height = height;
     ctx.translate(width/2,height/2); // now 0,0 is the center of the canvas.
   },false);
   

Полный рабочий пример: http://phrogz.net/tmp/canvas-fullscreen.html