javascript - HTML5 Canvas ，适合屏幕(其余部分)

Question

我制作了一个小网页游戏，我使用下面的代码将游戏缩放到页面大小。

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
// Attempt at auto-resize
function resize_canvas(){
    if (canvas.width  != window.innerWidth)
    {
        canvas.width  = window.innerWidth;
    }
    if (canvas.height != window.innerHeight)
    {
        canvas.height = window.innerHeight;
    }
}
window.addEventListener("resize", resize_canvas);
window.addEventListener("orientationchange", resize_canvas);

但是，我现在使用一些 CSS 在游戏顶部添加一个菜单，但遇到了问题。游戏采用内部窗口的大小，因此与游戏一起显示的任何内容都会导致内容不适合浏览器。

如何让游戏“填充”窗口的其余部分？

(我发现了有关如何将游戏缩放到窗口的问题，但我希望游戏填满窗口)

演示以下问题的图像:

(注意滚动条，我想消除它)

编辑:我对 Web 开发还很陌生，但我感觉 CSS 在 Canvas 上效果不佳。

Answer 1

如果删除导航高度？

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var menu = document.getElementById('nav') 
resize_canvas();
document.body.appendChild(canvas);

// Attempt at auto-resize
function resize_canvas(){
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight - menu.offsetHeight;
}
window.addEventListener("resize", resize_canvas);
window.addEventListener("orientationchange", resize_canvas);

和

canvas {
    position:relative;
}