화면의 나머지 부분에 맞게 HTML5 캔버스

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를 사용하여 게임 상단에 메뉴를 추가하고 있는데 문제가 있습니다. 게임은 내부 창의 크기를 사용하므로 게임과 함께 표시되는 내용으로 인해 콘텐츠가 브라우저에 맞지 않게됩니다.

어떻게 게임을 "채우기"다른 창을 만들 수 있습니까?

는 (I 창에 게임을 확장하는 방법에 대한 질문을 찾았지만, 내가 대신 창을 채우기 위해 게임을하고 싶습니다) 아래의 문제를 보여

이미지 : (

을 내가 제거하고 싶은 스크롤바)

편집을 주목하라 : 나는 웹 개발에 아주 새로운 해요,하지만 난 느낌 CSS 정말 캔버스에 잘 작동하지 않습니다 있습니다.

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