J'essaie de créer un élément de toile qui occupe 100% de la largeur et de la hauteur de la fenêtre.

Vous pouvez voir dans mon exemple ici que cela se produit, mais il ajoute des barres de défilement dans Chrome et FireFox. Comment puis-je éviter les barres de défilement supplémentaires et simplement fournir exactement la largeur et la hauteur de la fenêtre à la taille du canevas?

Pour que le canevas soit toujours plein écran en largeur et hauteur, c'est-à-dire même lorsque le navigateur est redimensionné, vous devez exécuter votre boucle de dessin dans une fonction qui redimensionne le canevas en window.innerHeight et window.innerWidth.

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

C'est ainsi que vous créez correctement le canevas sur toute la largeur et la hauteur du navigateur. Il vous suffit de mettre tout le code pour dessiner sur le canevas dans la fonction drawStuff ().

Vous pouvez essayer les unités de fenêtre (CSS3):

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

Je répondrai à la question plus générale de savoir comment faire adapter dynamiquement la taille d'un canevas lors du redimensionnement de la fenêtre. La réponse acceptée gère de manière appropriée le cas où la largeur et la hauteur sont toutes deux supposées être de 100%, ce qui a été demandé, mais qui modifiera également le rapport hauteur / largeur de la toile. De nombreux utilisateurs voudront que le canevas soit redimensionné lors du redimensionnement de la fenêtre, mais tout en conservant le rapport hauteur / largeur intact. Ce n'est pas la question exacte, mais elle «s'intègre», mettant simplement la question dans un contexte un peu plus général.

La fenêtre aura un certain rapport hauteur / largeur (largeur / hauteur), tout comme l'objet canevas. Vous devez être clair sur la manière dont vous voulez que ces deux rapports d'aspect se rapportent l'un à l'autre. Il n'y a pas de réponse unique à cette question - je vais passer en revue certains cas courants de ce que vous pourriez vouloir.

La chose la plus importante sur laquelle vous devez être clair: l'objet canevas html a un attribut width et un attribut height; puis, le css du même objet a également un attribut width et height. Ces deux largeurs et hauteurs sont différentes, les deux sont utiles pour des choses différentes.

Changer les attributs de largeur et de hauteur est une méthode avec laquelle vous pouvez toujours changer la taille de votre toile, mais vous devrez alors tout repeindre, ce qui prendra du temps et n'est pas toujours nécessaire, car vous pouvez effectuer un certain changement de taille. via les attributs css, auquel cas vous ne redessinez pas le canevas.

Je vois 4 cas de ce que vous pourriez vouloir se produire lors du redimensionnement de la fenêtre (tous commençant par une toile en plein écran)

1: vous voulez que la largeur reste à 100% et que le rapport hauteur / largeur reste tel qu'il était. Dans ce cas, vous n'avez pas besoin de redessiner le canevas; vous n'avez même pas besoin d'un gestionnaire de redimensionnement de fenêtre. Tout ce dont tu as besoin c'est

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

où ctx est votre contexte de canevas. violon: resizeByWidth

2: vous voulez que la largeur et la hauteur restent toutes les deux à 100%, et vous voulez que le changement de rapport hauteur / largeur qui en résulte ait l'effet d'une image étirée. Désormais, vous n'avez toujours pas besoin de redessiner le canevas, mais vous avez besoin d'un gestionnaire de redimensionnement de fenêtre. Dans le gestionnaire, vous faites

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

violon: messWithAspectratio

3: vous voulez que la largeur et la hauteur restent toutes les deux à 100%, mais la réponse au changement de rapport hauteur / largeur est quelque chose de différent de l'étirement de l'image. Ensuite, vous devez redessiner et le faire comme indiqué dans la réponse acceptée.

violon: redessiner

4: vous voulez que la largeur et la hauteur soient de 100% au chargement de la page, mais restent constantes par la suite (pas de réaction au redimensionnement de la fenêtre.

violon: fixe

Tous les violons ont un code identique, sauf pour la ligne 63 où le mode est défini. Vous pouvez également copier le code de violon à exécuter sur votre machine locale, auquel cas vous pouvez sélectionner le mode via un argument de chaîne de requête, comme? Mode = redraw

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

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

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

</body>
</html>

avec CSS

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

Je cherchais aussi à trouver la réponse à cette question, mais la réponse acceptée était cassante pour moi. Apparemment, utiliser window.innerWidth n'est pas portable. Cela fonctionne dans certains navigateurs, mais j'ai remarqué que Firefox ne l'aimait pas.

Gregg Tavares a publié ici une excellente ressource qui traite directement de ce problème: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (voir les anti-pattern # 3 et 4).

L'utilisation de canvas.clientWidth au lieu de window.innerWidth semble bien fonctionner.

Voici la boucle de rendu suggérée par 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();

(Développant la réponse de 動靜 能量)

Donnez du style à la toile pour qu'elle remplisse le corps. Lors du rendu sur le canevas, tenez compte de sa taille.

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

Pour les mobiles, il vaut mieux l'utiliser

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

car il ne s'affichera pas correctement après avoir changé l'orientation. La «fenêtre» sera agrandie lors du changement d'orientation en portrait. Voir l' exemple complet