Fullscreen Leinwand zeigt nicht das gesamte Bild

Question

Also ich versuche, ein Vollbild auf einer Leinwand (Minus der 80px-Header) anzuzeigen, aber die Leinwand wird abgespielt und zeigt nicht das ganze Ding.

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"; 

Und hier ist das, was lol.gif sollte Look like

Dies ist jedoch, was es tut look like auf der Website. Diese lila Bar sollte da sein, das ist die Nav-Bar (Wenn ich es mache)

Danke für die Hilfe.

Answer 1

Standardmäßig hat Canvas nicht die gleiche Größe wie das Fenster. Versuchen Leinwand Breite und Höhe wie diese Einstellung:

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

oder vielleicht

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

wenn das, was Sie bevorzugen. Abhängig von der Browser finden

Auch könnte man durch zwingende einige CSS-Vorgaben entfernen müssen:

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