HTML5 Canvas dopasować do okna

Question

Próbuję dostać moje płótna, aby dopasować stronę, kiedy to zrobić:

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

To idzie właśnie nad poziomo i pionowo, która jest dodanie pasków przewijania. Wielkość, w której następuje przejście, zależy od wielkości pasków przewijania, które są rozliczane zanim jeszcze się tam znajdą (tylko przypuszczenie). To jest to, co się dzieje, w jaki sposób mogę je dopasować do strony bez pasków przewijania.

Answer 1

Ustaw pozycję płótna na absolute. Upewnij się również, że w elemencie zawierającym nie ma wypełnienia lub marginesów.

To jest to, czego używam na wszystkich pełnoekranowych pokazach na płótnie.

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

Full Screen Demo

Answer 2

ten pracował dla mnie

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

Płótno domyślnie ustawiony jest display: inline-block. Zmień go display: block

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

Answer 4

miałem ten sam problem, a ja go rozwiązać poprzez usunięcie border.