HTML5 Canvas 100% de ancho de altura de la ventana gráfica?

Intento crear un elemento canvas que ocupe el 100% del ancho y alto de la ventana gráfica.

Puedes ver en mi ejemplo aquí que está ocurriendo, sin embargo está agregando barras de desplazamiento tanto en Chrome como en Firefox. ¿Cómo puedo evitar las barras de desplazamiento adicionales y simplemente proporcionar exactamente el ancho y alto de la ventana para que sea del tamaño del canvas?

    Para que el canvas ocupe siempre el ancho y el alto de la pantalla, lo que significa que incluso cuando se cambia el tamaño del navegador, debe ejecutar el bucle de dibujo dentro de una función que redimensiona el canvas a window.innerHeight y window.innerWidth.

    Ejemplo: http://jsfiddle.net/jaredwilli/qFuDr/

    HTML

     

    JavaScript

     (function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); // resize the canvas to fill browser window dynamically window.addEventListener('resize', resizeCanvas, false); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; /** * Your drawings need to be inside this function otherwise they will be reset when * you resize the browser window and the canvas goes will be cleared. */ drawStuff(); } resizeCanvas(); function drawStuff() { // do your drawing stuff here } })(); 

    CSS

     * { margin:0; padding:0; } /* to remove the top and left whitespace */ html, body { width:100%; height:100%; } /* just to be sure these are full screen*/ canvas { display:block; } /* To remove the scrollbars */ 

    Así es como haces correctamente el canvas a todo lo ancho y alto del navegador. Solo tiene que poner todo el código para dibujar en el canvas en la función drawStuff ().

    Puede probar unidades de ventana (CSS3):

     canvas { height: 100vh; width: 100vw; display: block; } 

    Responderé a la pregunta más general sobre cómo hacer que un canvas se adapte dinámicamente en tamaño al cambiar el tamaño de la ventana. La respuesta aceptada maneja adecuadamente el caso donde se supone que el ancho y la altura son del 100%, que es lo que se solicitó, pero que también cambiará la relación de aspecto del canvas. Muchos usuarios querrán que el canvas cambie el tamaño del tamaño de la ventana, pero manteniendo intacta la relación de aspecto. No es la pregunta exacta, pero “encaja”, simplemente colocando la pregunta en un contexto un poco más general.

    La ventana tendrá una relación de aspecto (ancho / alto), y también lo hará el objeto canvas. Cómo desea que estas dos proporciones de aspecto se relacionen entre sí es algo que tendrá que tener en claro, no existe una respuesta de “talla única” para esa pregunta. Iré a través de algunos casos comunes de lo que podría querer.

    Lo más importante que debe tener en claro: el objeto de canvas html tiene un atributo de ancho y un atributo de alto; y luego, el CSS del mismo objeto también tiene un ancho y un atributo de altura. Esos dos anchos y alturas son diferentes, ambos son útiles para diferentes cosas.

    Cambiar los atributos de ancho y alto es un método con el que siempre puede cambiar el tamaño de su canvas, pero luego tendrá que volver a pintar todo, lo que llevará tiempo y no siempre es necesario, ya que puede cambiar el tamaño de la pieza. a través de los atributos css, en cuyo caso no volverá a dibujar el canvas.

    Veo 4 casos de lo que podría querer que ocurra en el cambio de tamaño de la ventana (todo comienza con un canvas de pantalla completa)

    1: desea que el ancho permanezca al 100% y desea que la relación de aspecto permanezca como estaba. En ese caso, no necesita volver a dibujar el canvas; ni siquiera necesita un controlador de cambio de tamaño de ventana. Todo lo que necesitas es

     $(ctx.canvas).css("width", "100%"); 

    donde ctx es su contexto de canvas. violín: resizeByWidth

    2: quiere que el ancho y el alto permanezcan al 100%, y desea que el cambio resultante en la relación de aspecto tenga el efecto de una imagen estirada. Ahora, todavía no necesita volver a dibujar el canvas, pero necesita un controlador de cambio de tamaño de ventana. En el controlador, lo haces

     $(ctx.canvas).css("height", window.innerHeight); 

    violín: messWithAspectratio

    3: quiere que el ancho y la altura permanezcan al 100%, pero la respuesta al cambio en la relación de aspecto es algo diferente de estirar la imagen. Luego debe volver a dibujar, y hágalo de la forma que se describe en la respuesta aceptada.

    violín: volver a dibujar

    4: desea que el ancho y la altura sean del 100% en la carga de la página, pero permanezca constante a partir de entonces (sin reacción al cambio de tamaño de la ventana).

    violín: arreglado

    Todos los violines tienen un código idéntico, a excepción de la línea 63 donde se establece el modo. También puede copiar el código del violín para ejecutar en su máquina local, en cuyo caso puede seleccionar el modo a través de un argumento querystring, como? Mode = redraw

    Estaba buscando encontrar la respuesta a esta pregunta también, pero la respuesta aceptada se estaba rompiendo para mí. Al parecer, usar window.innerWidth no es portátil. Funciona en algunos navegadores, pero noté que a Firefox no le gustó.

    Gregg Tavares publicó un gran recurso aquí que aborda este problema directamente: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Ver anti-pattern # ‘s 3 y 4).

    Usar canvas.clientWidth en lugar de window.innerWidth parece funcionar muy bien.

    Aquí está el bucle de renderizado sugerido por Gregg:

     function resize() { var width = gl.canvas.clientWidth; var height = gl.canvas.clientHeight; if (gl.canvas.width != width || gl.canvas.height != height) { gl.canvas.width = width; gl.canvas.height = height; return true; } return false; } var needToRender = true; // draw at least once function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } checkRender(); 

    http://jsfiddle.net/mqFdk/10/

     < !DOCTYPE html>   aj      

    con CSS

     body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

    (Expandiendo la respuesta de 動靜 能量)

    Estilo el canvas para llenar el cuerpo. Cuando renderice en el canvas, tenga en cuenta su tamaño.

    http://jsfiddle.net/mqFdk/356/

     < !DOCTYPE html>   aj      

    CSS:

     body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

    Javascript:

     function redraw() { var cc = c.getContext("2d"); c.width = c.clientWidth; c.height = c.clientHeight; cc.scale(c.width, c.height); // Draw a circle filling the canvas. cc.beginPath(); cc.arc(0.5, 0.5, .5, 0, 2*Math.PI); cc.fill(); } // update on any window size change. window.addEventListener("resize", redraw); // first draw redraw();