HTML canvas裁剪后填充矩形出现1像素淡线的异常行为排查

问题现象 #

在Chrome和Firefox浏览器中均观测到HTML canvas的异常行为：完成裁剪操作后，在不同颜色的小矩形上方填充矩形时，会莫名出现1像素宽的淡线。
可复现问题的代码如下：

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");

context.translate(0.5, 0.5)

context.fillStyle = "orange";
context.fillRect(10,10,100,100);

context.beginPath();
context.rect(20,20,90,90);
context.clip();

context.fillStyle = "white";
context.fillRect(0,0,110,110);

context.fillStyle = "orange";
context.fillRect(0,0,190,190);

问题效果如下图：

问题根因 #

• 淡线本质是裁剪区域边缘的抗锯齿颜色插值导致的。
• 代码中为了优化细线渲染效果，对context执行了translate(0.5, 0.5)的坐标系偏移（这是前端canvas细线渲染的通用优化手段），但后续定义裁剪区域时没有同步适配偏移后的坐标系，裁剪边缘落在两个物理像素的中间位置，抗锯齿机制就会生成过渡色的淡线。

修复方案 #

定义裁剪区域时，同步将坐标对应调整0.5像素即可完全消除淡线，调整后的裁剪逻辑如下：

context.beginPath();
// 裁剪区域适配偏移后的坐标系，避免边缘插值
context.rect(20.5,20.5,90,90);
context.clip();

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