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

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

Ответ 1

Не используйте CSS для масштабирования вашего холста. Это будет масштабировать пиксели в холсте вверх/вниз.
Вместо этого наблюдайте за событием resize в соответствующем элементе (например, в окне), а затем соответствующим образом изменяйте свойства .width и .height на холсте в JavaScript. Это изменит количество пикселей, на которые вы рисуете.
Продолжайте использовать те же команды рисования с фиксированным размером, которые вы всегда используете. Объект будет оставаться тем же размером пикселя на экране.

Чтобы ваше содержимое было сосредоточено на экране, вы можете захотеть обработать 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);

Ответ 1

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