HTML5画布渲染矩形的好奇bug（？）

Question

我正在使用HTML5画布预渲染精灵，并且遇到了一些奇怪的行为，看起来像渲染错误。以下最小示例生成它：

＆＃13;

＆＃13;

.js

＆＃13;

var CT = document.getElementById("myCanvas").getContext("2d");
CT.scale(24, 24);
CT.translate(1.0717, 0.1);
CT.rect(0.2, 0.35, 0.4, 0.1);
CT.rect(-0.05, -0.05, 0.1, 1);
CT.translate(0.4, 0);
CT.rect(-0.05, -0.05, 0.5, 1);
CT.fill();

＆＃13;

＆＃13;

＆＃13;

查看生成的图像，我注意到水平条干扰左侧垂直条，但它没有碰到它。更改几何图形（例如，删除右侧垂直条），会以不可预测的方式更改（据我所见）的工件。

有没有人遇到过这个问题？什么可能导致它以及如何避免它？这让我很烦恼。行为发生在不同的浏览器中（我在IE11和Firefox Quantum上测试过）。

如果不清楚，请查看最左侧矩形的最左侧像素列。指向红色箭头的像素比蓝色箭头指向的像素更暗，即使右边的其他2个矩形看起来像对左边的矩形完全没有影响。

Answer 1

我设法在Edge中重新发布了这个问题但不是Firefox 57.0.1或Chrome 62.这可能不是最快的解决方案，但它确实修复了Edge中的问题，即栅格化它上面的每个矩形。在每个矩形之后调用CT.fill后跟CT.beginPath。

＆＃13;

＆＃13;

var CT = document.getElementById("myCanvas").getContext("2d");
CT.scale(24, 24);
CT.translate(1.0717, 0.1);
CT.rect(0.2, 0.35, 0.4, 0.1);
CT.fill();
CT.beginPath();
CT.rect(-0.05, -0.05, 0.1, 1);
CT.fill();
CT.beginPath();
CT.translate(0.4, 0);
CT.rect(-0.05, -0.05, 0.5, 1);
CT.fill();

＆＃13;

<canvas id="myCanvas" width="50" height="30" style="border:1px solid #d3d3d3;"></canvas>

＆＃13;

＆＃13;

＆＃13;

老实说，我提交了一个错误。虽然我知道画布规格有些宽松，但很难想象这个特定问题符合规范。 （虽然可能是）

Answer 2

问题是GPU使用的浮点数学中的精度误差。

因为您已经将渲染区域放大24倍，所以误差会被放大。

除了在像素边界上渲染和/或避免非常大的缩放之外，您无法做很多事情。

下面的图像在FF上呈现。画布为顶部红色框，缩放部分标记为红色以显示异常。最初在透明清除的画布上渲染，白色背景在帖子中添加。

请注意，效果会影响画布的宽度。

另请注意，某些坐标不显示效果（标有绿色箭头的列）

在Chrome上没有发生，我没有尝试过Edge。