使用setTransform结合drawImage时图像边缘漏显背景问题解决

问题核心 #

不同浏览器对Canvas亚像素渲染、坐标对齐的处理逻辑存在差异，即便将最终渲染尺寸调整为整数，Firefox仍可能因顶部边缘的舍入误差露出下层矩形，且禁用图像平滑无法解决该问题。以下是保留单个setTransform调用前提下的可行方案：

解决方案 #

1. 微调图片绘制偏移量 #

在绘制图片时，给y坐标添加一个极小的负偏移（如-0.01px，基于画布坐标系），抵消Firefox的顶部亚像素渲染偏差。因偏移量极小，不会影响视觉效果，但能确保图片完全覆盖矩形：

// 基于画布坐标系的偏移，无需反向计算缩放比例
ctx.drawImage(img, 0, -0.01, canvas.width, canvas.height);

2. 给矩形添加微小溢出 #

绘制红色矩形时，将高度增加1px（画布坐标系下），即使图片存在微小偏移，也不会露出下层矩形。由于已确保最终尺寸为整数，加1px不会破坏布局：

ctx.fillStyle = 'red';
// 矩形高度在画布坐标系下加1px
ctx.fillRect(0, 0, canvas.width, canvas.height + 1);

3. 强化像素对齐配置 #

在禁用图像平滑的同时，设置Firefox支持的低质量平滑参数，进一步强制像素对齐：

ctx.imageSmoothingEnabled = false;
ctx.imageSmoothingQuality = 'low';

验证示例（整合方案） #

<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'your-image-path.png';

img.onload = () => {
  // 计算适配画布的缩放比例
  const scaleX = canvas.width / img.width;
  const scaleY = canvas.height / img.height;
  const scale = Math.max(scaleX, scaleY);

  // 单个setTransform调用
  ctx.setTransform(scale, 0, 0, scale, 0, 0);

  // 绘制带溢出的红色矩形（原坐标系下的增量需反向缩放）
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, img.width, img.height + 1/scale);

  // 强化像素对齐
  ctx.imageSmoothingEnabled = false;
  ctx.imageSmoothingQuality = 'low';

  // 绘制带微调偏移的图片（原坐标系下的偏移需反向缩放）
  ctx.drawImage(img, 0, -0.01/scale);
};
</script>

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