Javascript 显示怪异的画布

我有一个javascript程序，它利用画布在屏幕上显示一些矩形。当我在ChromeBook上运行这个程序（将文件保存到Google Drive并下载）时，我会在一些方块之间获得一个空格：

但是，当我在上运行此命令时：

下面是javascript部分：

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight-50;
var charh = charw = 80;
function drawRect(x, y, height, width, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.fillRect(x, y, width, height);
    ctx.fill();
}
function Archer(x, y){
    this.x = x;
    this.y = y;
    this.draw = function (){
        updatePlayer(this.x+10, this.y, '#3B1000');
        updatePlayer(this.x+15, this.y, '#3B1000');
        updatePlayer(this.x+20, this.y, '#3B1000');
        updatePlayer(this.x+5, this.y+5, '#A56122');
        updatePlayer(this.x+10, this.y+5, '#A56122');
        updatePlayer(this.x+15, this.y+5, '#A56122');
        updatePlayer(this.x+20, this.y+5, '#A56122');
        updatePlayer(this.x+25, this.y+5, '#A56122');
        updatePlayer(this.x+5, this.y+10, '#A56122');
        updatePlayer(this.x+15, this.y+10, '#A56122');
        updatePlayer(this.x+25, this.y+10, '#A56122');
        updatePlayer(this.x+5, this.y+15, '#A56122');
        updatePlayer(this.x+10, this.y+15, '#A56122');
        updatePlayer(this.x+15, this.y+15, '#A56122');
        updatePlayer(this.x+20, this.y+15, '#A56122');
        updatePlayer(this.x+25, this.y+15, '#A56122');
        updatePlayer(this.x+15, this.y+20, '#A56122');
        updatePlayer(this.x+10, this.y+10, '#FFFFFF');
        updatePlayer(this.x+20, this.y+10, '#FFFFFF');
    }
}
var myarcher = new Archer(canvas.width/2-charw/2, canvas.height/2-charh/2);
function update() {                
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    myarcher.draw();
    setTimeout(update, 10);
}
function updatePlayer(x, y, color){
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.fillRect(x, y, 5, 5);
    ctx.fill();
}
update();

---

这些线是在非整数像素边界上绘制的。您可以水平或垂直调整浏览器1像素的大小，以根据高度/宽度是偶数还是奇数查看线条的显示或消失

请尝试以下方法：

var myarcher = new Archer(Math.round(canvas.width/2-charw/2), Math.round(canvas.height/2-charh/2));

---

这些线是在非整数像素边界上绘制的。您可以水平或垂直调整浏览器1像素的大小，以根据高度/宽度是偶数还是奇数查看线条的显示或消失

请尝试以下方法：

var myarcher = new Archer(Math.round(canvas.width/2-charw/2), Math.round(canvas.height/2-charh/2));

---

非常感谢！可能会给你一笔奖金，因为你应得的：非常感谢！也许会给你一笔奖金，因为你应得的