Chrome的HTML5画布剪辑javascript问题

我正在画布上玩多个剪裁形状，如下所示：

但是（仅在Chrome中），如果将画布元素的宽度或高度增加1px，则不会渲染所有形状

有什么想法吗？看看JSFIDLE：

代码非常简单：

for (i=1;i<=5;i++) {
  ctx.save();

  // clipping mask
  ctx.beginPath();
  ctx.arc(50 * i, 50, 20, 0, Math.PI * 2, true);
  ctx.closePath();

  ctx.clip();

  // shape to be clipped
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(50 * i, 70, 20, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();

  ctx.restore();
}

---

用于（i=1；i我在Win10，chrome 50.0.2661.75 m上也有同样的问题。这个问题是从我从49岁开始更新时开始的，并且在所有具有相同操作系统和chrome版本配置的计算机上都不可再现，所以可能与图形硬件有关，我得到了AMD Radeon HD6570。但是在最新的canary chrome 52.0.2713.0上，这个问题是不可再现的，so我可以推断这是chrome 50版本带来的硬件处理问题。（我不能评论这个问题，所以我在这里写了一些有用的额外信息）
在Win10，chrome 49.0.2623.110上调整大小对我来说很有效。chrome最近推出了几个画布错误版本…可能是更新？无法在osX 10.9，chrome 49.0.2623.110上重新调整大小