Canvas跨画布绘制时imageSmoothingEnabled偶发失效问题咨询

这是Chromium内核浏览器的已知渲染逻辑缺陷：当drawImage操作的源画布内容未发生实际像素变化时，浏览器会直接复用前一次同源绘制的缓存结果，该缓存逻辑未将imageSmoothingEnabled配置纳入校验维度，导致即使上下文始终设置了禁用平滑，也会错误复用带平滑效果的旧缓存。
你示例中点击draw A时是对已为黑色的像素区域重复填充黑色，没有产生实际像素变更，同样会触发缓存复用逻辑，出现平滑异常开启的问题。

• 方案1（最简便，推荐）：每次执行drawImage前重新为目标上下文赋值imageSmoothingEnabled属性，强制浏览器跳过缓存走完整绘制流程，修改后的b2点击事件代码如下：

document.getElementById("b2").onclick = function() {
  c2.clearRect(0,0,100,100);
  // 每次绘制前重设平滑配置，打破缓存匹配规则
  c2.imageSmoothingEnabled = false;
  c2.drawImage(c1.canvas, 0,0,2,2,0,0,100,100);
}

• 方案2：在源画布完成所有绘制操作后，添加无视觉影响的内容变更标记，让浏览器判定源画布已更新，不会复用旧缓存：

document.getElementById("b1").onclick = function() {
  c1.fillRect(0,0,1,1);
  // 读取并回写单个像素，无视觉变化但会标记画布内容已修改
  const pixel = c1.getImageData(0, 0, 1, 1);
  c1.putImageData(pixel, 0, 0);
}

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