HTML5 Canvas passen Fenster

Question

Ich versuche, meine Leinwand zu bekommen um die Seite zu passen, wenn ich das tue:

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

Es geht nur über horizontal und vertikal, die Bildlaufleisten erweitert. die Größe, die es geht über die Größe der Bildlaufleisten werden berücksichtigt, bevor sie überhaupt da sind (nur eine Vermutung) ist das was passiert, wie würde ich gehen, um es auf die Seite ohne Bildlaufleisten passen.

Answer 1

Legen Sie die Leinwandposition auf absolute fest. Stellen Sie außerdem sicher, dass im umschließenden Element keine Abstände oder Ränder festgelegt sind.

Dies ist, was ich auf allen meinen Vollbild-Leinwanddemos benutze.

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

Full Screen Demo

Answer 2

Das ist für mich gearbeitet

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

Die Leinwand standardmäßig display: inline-block gesetzt. Ändern Sie ihn auf display: block

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

Answer 4

hatte ich das gleiche Problem, und ich löste es durch die border entfernen.