为什么2D canvas通过CSS缩放会出现模糊，该如何解决？

1. 你给2D上下文传入的antialias: false参数适配范围有限：该参数最初是WebGL上下文的标准配置，部分浏览器对2D上下文不识别该配置，且它仅控制画布内部绘制矢量路径、文字时的抗锯齿逻辑，完全不影响浏览器对canvas元素做CSS缩放时的渲染行为。
2. 浏览器默认对所有替换元素（img、canvas等）执行平滑缩放策略：CSS缩放时会默认用双线性插值等算法做像素过渡，自然会把原本的1px像素块变成边缘模糊的色块。

不需要修改现有绘制逻辑，只需加2处配置即可解决：

• 给canvas元素设置CSS的image-rendering属性，指定缩放时使用近邻插值保留锐利像素边缘
• 可选：给2D上下文设置imageSmoothingEnabled = false，关闭画布内部绘制缩放内容时的平滑效果，做双重保障

修改后的完整代码如下：

const element = document.createElement('canvas');
// 2D上下文关闭内部绘制平滑
const canvas = element.getContext("2d");
canvas.imageSmoothingEnabled = false;

const size = 20;
const scale = 10;

element.width = size;
element.height = size;
element.style.width = size * scale + 'px';
element.style.height = size * scale + 'px';
// 新增：设置缩放时像素锐利的CSS属性
element.style.imageRendering = 'pixelated';
// 兼容旧版浏览器的前缀可按需添加
element.style.webkitImageRendering = 'crisp-edges';
element.style.mozImageRendering = 'crisp-edges';

[{x:10, y: 4}, 
 {x:10, y: 6}, 
 {x:10, y: 12}, 
 {x:10, y: 13}]
.forEach(({x, y}) => canvas.fillRect(x, y, 1, 1));

document.body.appendChild(element);

image-rendering: pixelated是目前所有现代浏览器都支持的标准属性，设置后CSS缩放时会直接把画布的单个像素放大为对应大小的纯色块，完全不会出现模糊的抗锯齿边缘，不需要修改绘制逻辑把每个像素手动设为10px，可保留你方案的简洁性。

内容的提问来源于stack exchange，提问作者Basti