Estou tentando criar um elemento de tela que ocupa 100% da largura e altura da janela de exibição.

Você pode ver no meu exemplo aqui que está ocorrendo, mas está adicionando barras de rolagem no Chrome e no FireFox. Como impedir as barras de rolagem extras e fornecer exatamente a largura e a altura da janela para o tamanho da tela?

Para manter a largura e a altura da tela cheia da tela sempre, ou seja, mesmo quando o navegador é redimensionado, você precisa executar seu loop de desenho em uma função que redimensione a tela para window.innerHeight e window.innerWidth.

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

HTML

<canvas id="canvas"></canvas>

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 */

É assim que você cria corretamente a largura e a altura totais da tela do navegador. Você só precisa colocar todo o código para desenhar na tela na função drawStuff ().

Você pode tentar unidades de viewport (CSS3):

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

Responderei à pergunta mais geral de como adaptar uma tela dinamicamente ao tamanho após redimensionar a janela. A resposta aceita lida adequadamente com o caso em que largura e altura devem ser 100%, o que foi solicitado, mas também alterará a proporção da tela. Muitos usuários desejam que a tela seja redimensionada no redimensionamento da janela, mas mantendo a proporção intacta. Não é a pergunta exata, mas ela "se encaixa", apenas colocando a questão em um contexto um pouco mais geral.

A janela terá alguma proporção (largura / altura), e o objeto da tela também. Como você deseja que essas duas proporções se relacionem entre si é uma coisa que você precisa esclarecer, não há uma resposta única para essa pergunta - analisarei alguns casos comuns do que você pode quer.

O mais importante é esclarecer: o objeto de tela html possui um atributo de largura e um atributo de altura; e, em seguida, o css do mesmo objeto também possui um atributo de largura e altura. Essas duas larguras e alturas são diferentes, ambas são úteis para coisas diferentes.

Alterar os atributos de largura e altura é um método com o qual você sempre pode alterar o tamanho da sua tela, mas terá que repintar tudo, o que levará tempo e nem sempre será necessário, porque é possível realizar algumas alterações no tamanho. por meio dos atributos css; nesse caso, você não redesenha a tela.

Eu vejo quatro casos do que você pode querer que ocorra no redimensionamento da janela (todos começando com uma tela cheia)

1: você deseja que a largura permaneça 100% e deseja que a proporção fique como estava. Nesse caso, você não precisa redesenhar a tela; você nem precisa de um manipulador de redimensionamento de janela. Tudo o que você precisa é

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

onde ctx é o seu contexto de tela. fiddle: resizeByWidth

2: você deseja que a largura e a altura permaneçam 100% e a alteração resultante na proporção tenha o efeito de uma imagem esticada. Agora, você ainda não precisa redesenhar a tela, mas precisa de um manipulador de redimensionamento de janela. No manipulador, você faz

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

fiddle: messWithAspectratio

3: você deseja que a largura e a altura permaneçam 100%, mas a resposta para a mudança na proporção é algo diferente de esticar a imagem. Em seguida, é necessário redesenhar e fazê-lo da maneira descrita na resposta aceita.

violino: redesenhar

4: você deseja que a largura e a altura sejam 100% no carregamento da página, mas permaneça constante a partir de então (nenhuma reação ao redimensionamento da janela.

violino: fixo

Todos os violinos têm código idêntico, exceto a linha 63, onde o modo está definido. Você também pode copiar o código do violino para executar em sua máquina local; nesse caso, você pode selecionar o modo por meio de um argumento da string de consulta, como? Mode = redraw

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

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

com CSS

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

Eu também estava procurando encontrar a resposta para essa pergunta, mas a resposta aceita estava sendo quebrada para mim. Aparentemente, usar window.innerWidth não é portátil. Funciona em alguns navegadores, mas notei que o Firefox não gostou.

Gregg Tavares postou um ótimo recurso aqui que aborda esse problema diretamente: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Veja os itens 3 e 4 do antipadrão).

Usar canvas.clientWidth em vez de window.innerWidth parece funcionar bem.

Aqui está o loop de renderização 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();

(Expandindo com a resposta de 動靜 能量)

Estilize a tela para preencher o corpo. Ao renderizar na tela, leve em consideração seu tamanho.

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

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

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();

Para celulares, é melhor usá-lo

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

porque ela será exibida incorretamente após alterar a orientação. A "janela de visualização" aumentará ao mudar a orientação para retrato.Veja o exemplo completo