Javascript 全屏画布不显示整个图像

因此，我试图在画布上显示全屏图像（减去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应该做的

然而，这是它在网站上所做的。那个紫色条应该在那里，那是导航条（当我做的时候）

---

谢谢您的帮助。

默认情况下，画布的大小与窗口的大小不同。 尝试如下设置画布宽度和高度：

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