Estirar el canvas y pantalla completa

Los que han creado proyectos antes en Flash, recordarán una de sus características singulares, que a veces podía ser funcional y otras veces molesto, dependiendo el efecto que se deseaba hacer. Hablo de la peculiar propiedad que, si ponías el contenedor de diferente tamaño al proyecto original, este se escalaba para ajustarse al nuevo tamaño.

Los HTML5 Canvas aparentan en un comienzo no tener esta propiedad, pues si cambiamos el ancho o alto de uno, solo nos da un escenario más grande o chico, pero este no se escala. Lo que ocurre, es que aprovecha una segunda propiedad para escalar el canvas, de forma aparte a poner su tamaño inicial. Lo hace mediante la etiqueta Style.

Para comprobar esto, tomaremos el juego de la serpiente, y buscaremos al comienzo donde creamos la etiqueta canvas que contiene nuestro juego. Lo modificaremos agregando en el atributo style, las propiedades width y height:

<canvas id="canvas" width="300" height="150" style="background:#999; width:600px; height:300px;">
    [Canvas not supported by your browser]
</canvas>

Podemos comprobar que al comienzo, tenemos los atributos width y height:

width="300" height="150"

Pero posteriormente, los tenemos como propiedad dentro del style, con valores al doble que en su atributo:

width:600px; height:300px;

Al abrir el archivo, notaremos que nuestro juego está ahora escalado al doble. De esta forma, es como podemos escalar un juego a diferentes tamaños.

Pantalla completa.

Supondré que ahora que has visto como escalar un juego, has pensado en llenar la pantalla de tu navegador con él. Esto es ciertamente posible, pero se trata de una técnica un tanto compleja. Descuida, te enseñaré a aplicarla.

Lo primero que viene a nuestra mente, es darle ancho y alto del 100%. Pero para realmente llenar la pantalla, tenemos que convertir su posición a absoluta, y posicionarla justo hasta la esquina superior izquierda:

<canvas id="canvas" width="300" height="150" style="background:#999; width:100%; height:100%; position:fixed; top:0; left:0">
    [Canvas not supported by your browser]
</canvas>

El problema que descubrimos con esto, es que la imagen se estira de forma no proporcionada. Y tomemos en cuenta que no todas las pantallas tienen la misma proporción, por lo que en pantallas más cuadradas se verá la imagen aun más achatada que en pantallas widescreen.

Para hacer que llene lo mayor posible la pantalla de forma proporcional tendremos que crear una función en Javascript, a la que llamaremos setFullscreen. Lo primero que hará esta función, es encontrar la proporción de nuestra pantalla, y determinar la escala a la cual debe ser estirado, dependiendo del ancho y alto de la pantalla:

            var w = window.innerWidth / canvas.width;
            var h = window.innerHeight / canvas.height;
            var scale = Math.min(h, w);

Una vez obteniendo este valor, asignamos el ancho y alto de nuestro canvas de acuerdo a la escala resultante:

            canvas.style.width = (canvas.width * scale) + 'px';
            canvas.style.height = (canvas.height * scale) + 'px';

Por último, queda centrar el canvas, pues si lo asignamos a los valores top:0 left:0, no se verá tan bien como que esté centrado. Como le asignaremos una posición absoluta/fija, no podremos centrarlo por la propiedad text-align:center, por lo que deberemos hacer uso de una técnica más avanzada, conocida como <a href="http://ayotli.com/web-tips/div-fixed-center.html">divisor siempre fijo en el centro</a>.

En nuestro caso no lo aplicaremos a un div, si no a nuestro canvas, pero el principio es el mismo. Damos al canvas la propiedad position:fixed, lo ubicamos a top:50% left:50%, y finalmente le restamos a marginTop y marginLeft la mitad del ancho y alto de nuestro canvas respectivamente. El código queda así:

            canvas.style.position = 'fixed';
            canvas.style.left = '50%';
            canvas.style.top = '50%';
            canvas.style.marginLeft = -(canvas.width * scale) / 2 + 'px';
            canvas.style.marginTop = -(canvas.height * scale) / 2 + 'px';

Finalmente, tendremos de esta forma armada nuestra función setFullscreen:

        function setFullscreen(){
            var w = window.innerWidth / canvas.width;
            var h = window.innerHeight / canvas.height;
            var scale = Math.min(h, w);

            canvas.style.width = (canvas.width * scale) + 'px';
            canvas.style.height = (canvas.height * scale) + 'px';
            canvas.style.position = 'fixed';
            canvas.style.left = '50%';
            canvas.style.top = '50%';
            canvas.style.marginLeft = -(canvas.width * scale) / 2 + 'px';
            canvas.style.marginTop = -(canvas.height * scale) / 2 + 'px';
        }

Ahora tan solo debemos llamar a setFullscreen desde nuestro init, y tendremos nuestro juego en pantalla completa. Para complementarlo mejor, recomiendo que pongas el color de fondo de la página en negro:

<body style="background:black">

Si en algún momento de nuestro juego queremos revertir esta función, solo debemos convertir las propiedades del estilo a vacío, lo cual podemos hacer mediante esta función unsetFullscreen:

        function unsetFullscreen(){
            canvas.style.width = '';
            canvas.style.height = '';
            canvas.style.position = '';
            canvas.style.left = '';
            canvas.style.top = '';
            canvas.style.marginLeft = '';
            canvas.style.marginTop = '';
        }

Con esto, concluimos esta lección. Si blogspot es tan amable con nosotros, y nos permite tan malvadas e intrusivas instrucciones, al presionar la tecla F de tu teclado, podrás jugar este juego en pantalla completa. Desactívalo presionando F de nuevo.

[Canvas not supported by your browser]
Felices códigos. ¡Hasta la siguiente semana!
Siguiente parte: Doble búfer y escalado pixeleado.