how to make firefox fullscreen mode like chrome (i.e. not streching content)

问题

I am using the fullscreen API of modern browsers for my game application, Chrome works great in this respect and gives a window resize event that allows the resetting of the canvas dimensions according to the new fullscreen size. Firefox also respects the event and allows re-sizing but anyway streches the canvas to the fullscreen, all graphics and mouse distances are distorted.

Does anyone know how to get firefox behaving like chrome in this regard, i.e. how to remove the automatic css rules applied to the canvas element?

doing the following in the window resize handler doesn't do anything in firefox

var w = $(window).width();
var h = $(window).height();
var size = Math.min(w,h);

var elem = document.getElementById("canvas");
elem.style.width = size+"px";
elem.style.height = size+"px"; 

I think maybe this can be done by placing the canvas centrally within a div container and the container is stretched allowing the canvas dimensions to be adjusted thus preserving the aspect ratio.

回答1:

Don't style the canvas, set it's width directly:

var elem = document.getElementById("canvas");
elem.width = size;
elem.height = size;

Changing the width and height of a canvas with CSS is supposed to distort it without changing the intrinsic size, just the same as with any other image.

来源：https://stackoverflow.com/questions/16408780/how-to-make-firefox-fullscreen-mode-like-chrome-i-e-not-streching-content