javascript - HTML5 canvas渲染矩形的奇怪bug(？)

Question

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

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();

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

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

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

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

Answer 1

我设法在 Edge 中解决了这个问题，但在 Firefox 57.0.1 或 Chrome 62 中没有解决。这可能不是最快的解决方案，但它确实解决了 Edge 中的问题，即通过调用 自行栅格化每个矩形CT.fill 后跟 CT.beginPath 在每个矩形之后。

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();

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

老实说，我会提交错误。虽然我知道 Canvas 规范有些宽松，但很难想象这个特定问题符合规范。 (虽然可能是)