HTML5 Canvas phù hợp với cửa sổ

Question

Tôi đang cố gắng để có được vải của tôi để phù hợp với trang web, khi tôi làm:

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

Nó đi chỉ hơn ngang và dọc được thêm thanh cuộn. kích thước của nó đi qua là về kích thước của các thanh cuộn đang được chiếm trước khi họ thậm chí có (chỉ là một đoán) là whats xảy ra, làm thế nào tôi sẽ đi về việc nó phù hợp với trang không có thanh cuộn.

Answer 1

Đặt vị trí canvas thành absolute. Cũng đảm bảo không có đệm hoặc lề được đặt trong phần tử chứa.

Đây là những gì tôi sử dụng trên tất cả các bản trình diễn canvas toàn màn hình của mình.

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
canvas { 
    position:absolute; 
} 

Full Screen Demo

Answer 2

này làm việc cho tôi

function resize() { 

    var canvas = document.getElementById('game'); 
    var canvasRatio = canvas.height/canvas.width; 
    var windowRatio = window.innerHeight/window.innerWidth; 
    var width; 
    var height; 

    if (windowRatio < canvasRatio) { 
     height = window.innerHeight; 
     width = height/canvasRatio; 
    } else { 
     width = window.innerWidth; 
     height = width * canvasRatio; 
    } 

    canvas.style.width = width + 'px'; 
    canvas.style.height = height + 'px'; 
}; 

window.addEventListener('resize', resize, false); 

Answer 3

Các vải theo mặc định được thiết lập để display: inline-block. Thay đổi nó thành display: block

body { 
    margin: 0; 
    padding: 0; 
} 
canvas { 
    display: block; 
} 

Answer 4

Tôi gặp sự cố tương tự và tôi đã giải quyết vấn đề này bằng cách xóa border.