javascript - 无法在 html5 画布上打开单个像素

Question

我的反应应用程序中有以下组件：

<Grid container direction="column" justify="center" alignItems="center" item lg={12}>
  <canvas id="canvas" style={{border: '1px solid #000000', minHeight: '89%', minWidth: '99%'}} />
</Grid>

我fillRect()用来在其中绘制一些像素：

for(let i=-1; i<2; i++) {
  for(let j=-1; j<2; j++) {
    if (seedContent[i+1][j+1] === '1') {
      ctx.fillRect(centerPoint[0]+j, centerPoint[1]+i, 1, 1);
    }
  }
}

问题是生成的图像不是由单个像素组成，而是像像素化图像一样缩放：

如果我减小画布的大小，如下所示：

<Grid container direction="column" justify="center" alignItems="center" item lg={12}>
  <canvas id="canvas" style={{border: '1px solid #000000', minHeight: '10%', minWidth: '10%'}} />
</Grid>

我得到一个由单个像素组成的图像，这就是我想要的：

如何在大画布上处理单个像素？

编辑 我发现如果我这样设置画布：

<Grid container direction="column" justify="center" alignItems="center" item lg={12}>
  <canvas id="canvas" width='1200' height='600' border="1px solid #FFFFFF" />
</Grid>

我得到了我想要的结果，但我必须设置一个固定的大小：

标签： javascriptreactjscanvaspixel