Canvas pleine page sans barre de défilement ?

**Lorenzo77** · 04/07/2014, 01h51

salut,

j'essaye de faire en sorte qu'un canvas utilise tout l'espace possible d'un document (body), je fais donc un 'resize' quand la taille de la fenetre change pour redimensionner le canvas mais ya une couille dans le potage.

si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

canvas.height = window.innerHeight;

j'ai la barre de défilement vertical + horizontal

je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

canvas.height = window.innerHeight - 4;

les barres disparaissent mais j'ai un espace de 4px au bas du canvas

voici le code de test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>un canvas pleine page ?</title>
<style>
html, body {
  background-color: black;
  width:  100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
#canvas {
  background-color: white;
  margin: 0;
  padding: 0;
  border: 0;
}
</style>
<script>
window.onload = window.onresize = function(){
 
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
 
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
 
  context.lineWidth = 3;
  context.strokeStyle = "#FF0000";
  context.strokeRect(0,0,canvas.width,canvas.height); 
 
  console.group("test");
  console.log("window.innerWidth=", window.innerWidth);
  console.log("window.innerHeight=",window.innerHeight);
  console.log("document.width=",document.width);
  console.log("document.height=",document.height);
  console.log("canvas.width=",canvas.width);
  console.log("canvas.height=",canvas.height);
  console.groupEnd("test");
};
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

je ne sais pas si le probleme vient du JS ou des CSS ...
j'ai essayé de définir la taille du canvas en pixel, dans les css ou en dur mais pas de changement.

comment régler le probleme (testé sur FF et chrome) ?

ps : je suis obligé de mettre width: 100% et height: 100% dans les css pour chrome sinon il merdouille complet (j'ai toujours les barre de défilement)