Javascript 如何修复：图像渲染：像素化错误

我已经完成了这一页： 它通过从json文件获取数据在画布上绘制像素图像。我使用了css属性图像渲染：在画布上像素化使其工作。但是，当我在chome developer tools中调整窗口大小时，画布正在抖动，画布正在丢失像素化。更重要的是，当我通过单击“在完整窗口中打开”调整窗口大小时，画布正在丢失像素化

我使用devtools找出了问题所在，它表明canvas仍然有它的图像渲染：像素化（但实际上它不工作）

第一张照片的JS（4x4）：

让canvas=document.getElementById（'canvas'）；
设ctx=canvas.getContext（'2d'）；
让btn_load_4x4=document.getElementById（'btn_load_4x4'）；
btn_load_4x4.addEventListener（'click'，fillCanvas4x4）；
函数fillCanvas4x4（）{
取回(
'https://raw.githubusercontent.com/rolling-scopes-school/tasks/master/tasks/stage-2/codejam-canvas/data/4x4.json'
)
.然后（功能（resp）{
返回resp.json（）；
})
.then（功能（数据）{
宽度=4；
高度=4；
让colors=data.map（el=>el.map（el=>'#'+el））；
for（设i=0；i

CSS:

.帆布{
宽度：512px；
高度：512px；
填充：20px；
图像渲染：像素化；
}

如果有人感兴趣，我可以提供Github存储库上的链接，这样您就可以自己查看完整的代码。我想每次调整画布的大小时，您都需要重新绘制画布。否则，像素化图像将不再与设备像素完美对齐，您将看到一些抗锯齿。“每次调整大小”都不会调整大小，而是具有固定的宽度和高度。当窗口调整大小时，会出现“错误”。或者我误解了你的答案？我猜你的意思是当你调整窗口大小使画布从512px下降到360px时。这不是你的意思吗？您的CSS文件中有一个媒体查询，当窗口宽度小于580px时，该查询将宽度和高度设置为360px。thanck是否为您提供帮助？问题出在我的chrome版本上。非常失望>我无法想象78.0.3904.70和稍早的版本之间会有如此大的差异