Canvas fillRect Höhe und Breite sind immer verzerrt/verzerrt

Question

Die Form, die ich auf die Leinwand legte, ist immer irgendwie verzogen. Ich bin mir nicht sicher, ob es meine Canvas-Abmessungen oder nur schlechter Code ist. (obwohl es, wenn es ein schlechter Code wäre, es wahrscheinlich schon repariert hätte). Hier ist mein Code:

<script type = "text/javascript"> 
var game = document.getElementById("game"); 
//To keep the shapes from coming out with low resolution/a fuzzy look 
game.height = 1000; 
game.width = 1000; 
var context = game.getContext("2d"); 
var gamePieces = [] 
function gamePiece(width, height, color, x, y){ 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y; 
    this.update = function(){ 
     context.fillStyle = color; 
     context.fillRect(this.x, this.y, this.height, this.width); 
    } 
    this.move = function(distancex, distancey, leftOrRight, upOrDown){ 
     if(leftOrRight.toLowerCase() == "left"){ 
      this.x = this.x - distancex 
     } else if(leftOrRight.toLowerCase() == "right"){ 
      this.x = this.x + distancex; 
     } 
     if(upOrDown.toLowerCase() == "up"){ 
      this.y = this.y - distancey; 
     } else if(upOrDown.toLowerCase() == "down"){ 
      this.y = this.y + distancey 
     } 
    } 
    gamePieces[gamePieces.length] = this 
    context.fillStyle = color; 
    context.fillRect(this.x, this.y, this.height, this.width); 
} 
function update(){ 
    context.clearRect(0, 0, game.width, game.height); 
    for(var i = 0; i < gamePieces.length; i++){ 
     gamePieces[i].update(); 
    } 
} 
setInterval(update, 1); 
var p1 = new gamePiece(100, 100, "blue", 0, 0); 

</script> 

Und hier ist die CSS für die Leinwand:

#game { 
    height: 100%; 
    width: 100%; 
} 

Ich habe versucht, einige der Dimensionen ändern, es kommt immer noch auf diese Weise aus. Browser, den ich teste, ist Chrome.

Answer 1

Sie legen die Breite und Höhe des Canvas auf 1000px fest, aber dann setzen Sie die css Breite und Höhe auf 100%.

Die Leinwand wird immer noch 1000 * 1000 Pixel groß sein, aber der CSS wird den Inhalt so skalieren, dass er dem Seitenverhältnis des Fensters entspricht.

Stellen Sie sich die Leinwand als Bild vor. Wenn Sie die Größe eines Bildes ändern, wird es verzerrt.

Entfernen Sie einfach die CSS-Stile.