HTML5 Leinwand, passend zu (Rest) Bildschirm

Question

Ich habe ein kleines Webspiel gemacht, ich benutze diesen Code unten, um das Spiel auf die Seitengröße zu skalieren.

Allerdings habe ich jetzt ein Menü im oberen Teil des Spiels mit etwas CSS hinzugefügt und ich stoße auf Probleme. Das Spiel nimmt die Größe des inneren Fensters an, so dass alles, was zusammen mit dem Spiel angezeigt wird, dazu führt, dass der Inhalt nicht in den Browser passt.

Wie kann ich das Spiel "füllen" den Rest des Fensters?

(ich habe festgestellt, Fragen, wie das Spiel auf die Fenster zu skalieren, aber ich würde das Spiel gefällt das Fenster statt zu füllen)

Ein Bild, das Problem unten zu demonstrieren:

(Beachten Sie die Bildlaufleisten, die ich mag würde beseitigen)

Edit: ich bin ganz neu in Web-Entwicklung, aber ich habe das Gefühl, CSS nicht wirklich gut auf Leinwand funktioniert.

Answer 1

Und wenn Sie die Nav Höhe entfernen?

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

und

canvas { 
    position:relative; 
}