Canvas drawImage绘制像素风矿石模糊问题求助

我正在用HTML、CSS和JavaScript开发一款挖矿游戏（无外部库），通过Canvas的drawImage()函数绘制单个矿石。尝试为图片设置image-rendering: pixelated实现像素化放大效果，但放大后图片仍模糊。每种矿石仅加载一张图片，相关代码如下：

class Ore {
    constructor(name, /*...*/) {
        // ...
        this.texture = new Image(32, 32)
        this.texture.src = `assets/ores/${name}.png`
        this.texture.onload = () => {loadProg += 1; this.texture.style.imageRendering = "pixelated"}
        // ...
    }
}

渲染代码（每帧执行，ctx为Canvas上下文）：

function render() {
    ctx.clearRect(0, 0, 2000, 920)
    // 筛选可见矿石
    oreDisplays.filter((i) => (i.yOffset == yOffset)).forEach((i) => {
        ctx.drawImage(i.texture, i.pos[0], i.pos[1], 40, 40)
    })
    // ...
}

我试过在onload内外设置该样式，也试过带连字符和不带连字符的写法，还尝试过用CSS设置img标签，但图片依旧模糊。预期放大后图片无模糊效果，现寻求可行方案，要求不严重影响性能，除必要情况外不使用外部库（仅可使用jQuery）。

核心问题是：你给DOM的Image元素设置image-rendering样式，但Canvas绘制时不会继承这个属性——Canvas有自己的图像渲染规则，需要直接配置上下文：

• 设置Canvas上下文的图像平滑开关
  在初始化Canvas上下文后，添加以下代码禁用图像平滑，强制像素化渲染：

// 禁用Canvas图像平滑，实现像素化放大
ctx.imageSmoothingEnabled = false;
// 兼容各浏览器前缀
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;

这样drawImage放大绘制时，就会保留像素边缘，不会出现模糊。

• 确认图片原始尺寸
  确保你的矿石图片本身是32x32的像素图，避免因图片实际尺寸和new Image(32,32)设置的尺寸不匹配，导致额外缩放模糊。可以在onload里打印验证：

this.texture.onload = () => {
    loadProg += 1;
    console.log(`${name}图片实际尺寸：${this.texture.width}x${this.texture.height}`);
}

• 可选：给Canvas元素加CSS渲染规则（双重保障）
  给页面中的Canvas标签添加CSS样式，进一步确保渲染行为一致：

canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
}

以上方案完全不需要外部库，性能影响可以忽略，能完美实现你要的像素化放大效果。

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