フルスクリーンキャンバス全体画像を表示していません

Question

キャンバス（マイナス80pxヘッダー）にフルスクリーンイメージを表示しようとしていますが、キャンバスが再生されていて全体を表示していません。

Javascriptを

var c =document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = new Image(); 


img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    c.style.width = document.body.clientWidth; 
    c.style.height = document.body.clientHeight-80; 
}; 
img.src = "lol.gif"; 

そして、ここではlol.gifがLook like

はしかし、これはそれがサイト上look likeを何であるべきものです。その紫色のバーがそこにあるはずです、それはnav barです（私が作ったとき）

ありがとうございました。

Answer 1

デフォルトでは、キャンバスはウィンドウと同じサイズになりません。それはあなたが好むものだ場合

ctx.width = window.innerWidth; 
ctx.height = window.innerHeight; 

または多分

ctx.width = document.body.clientWidth; 
ctx.height = document.body.clientHeight; 

： 次のようにキャンバスの幅と高さを設定してみてください。ブラウザに依存し、また、あなたがオーバーライドすることによって、いくつかのCSSのデフォルト設定を削除する必要があるかもしれません

を参照してください。

html, body, canvas { 
    margin: 0; 
    padding: 0; 
}