Javascript HTML5画布填充出血

以下是一些代码，其中我：

用红色填充一组点：（1,1）、（2,1）、（2,2）、（2,3）

观察我没有用红色填充的点的颜色：（2,4）

人们会期望该点是

{red:0，green:0，blue:0，alpha:0}

，就像画布上的任何其他像素一样

事实上，它是

{alpha:1，blue:0，green:0，red:255}

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

context.fillStyle = "#f00";

// Fill a bunch of points

context.fillRect(1, 1, 1, 1);
context.fillRect(2, 1, 1, 1);
context.fillRect(2, 2, 1, 1);
context.fillRect(2, 3, 1, 1);

// Retrieve color at (2, 4), which I did not fill in

var point = { x: 2, y: 4 }

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var start = (point.x + canvas.width * point.y) * 4;
var subarray = imageData.data.subarray(start, start + 4);

// Observe results

console.log({
  red:   subarray[0],
  green: subarray[1],
  blue:  subarray[2],
  alpha: subarray[3],
});

如果您想在家中复制，这里有一个JSFIDLE：

注意：这个JSFIDLE确实重现了这个示例。我在电脑上所做的就是按下播放按钮并观察控制台。我听说它不会在某些人的电脑上复制。这让我怀疑这是否是一个浏览器错误

我的问题是：这怎么可能？

fillRect

是如何渗入其他像素的，即使我已将要绘制的像素的宽度和高度明确设置为（1，1）

---

另外，我发现解决这个问题的一种方法是在绘制任何图形之前在整个画布上调用clearRect（）。我真的不在乎这个；我只想知道这里到底发生了什么。

在我的浏览器中，它显示了预期的结果。我已经将颜色从红色（#f00）更改为绿色（#0f0），并且它显示结果{红色：0，绿色：255，蓝色：0，阿尔法：255}只有iff点（2,4）被填充。否则它将显示结果{红色：0，绿色：0，蓝色：0，alpha:0}如果它没有像Shoaib那样被触动，我就无法复制，并且看起来像预期的那样工作。（Firefox、Opera）。通常，“出血”是由坐标系顶部绘制的点引起的，需要一个点来平移上下文0.5像素x/y，但在本例中不需要这样做。这是完整的代码，还是实际代码（如果不是）使用转换或者-你在哪个浏览器中遇到了问题？@K3N，Shoaib Konnur，我可以在macOS Sierra上的Chrome 55.0和Firefox 50.0上重现这个问题。是的，JSFIDLE是整个可重现的例子。我只需按下小提琴上的run按钮，在控制台中观察结果。似乎与操作系统的图形子系统有关。你得到了什么结果？