HTML5 canvas clip javascript issue with Chrome

Question

I am playing around with multiple clipped shapes on a canvas like this:

But (only in Chrome), if you increase the width or height of that canvas element by even 1px, it doesn't render all the shapes.

Any ideas? Have a look at the jsfiddle:

https://jsfiddle.net/entozoon/6fqq0567/

The code is pretty straight forward:

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

-- UPDATE --

It turns out that the problem is to do with 2D canvas acceleration. If I disable 'Accelerated 2D canvas' in chrome://flags that fixes it.

This is definitely NOT a solution though!

Must be a graphics issue..? (yes I have up-to-date drivers, chrome, etc.)

Answer 1

I have the same issue on Win10, chrome 50.0.2661.75 m. The issue started when I updated from 49, and is not reproducible in all computers with the same OS and Chrome version configurations, so probably it has to do with graphics hardware, I got an AMD Radeon HD6570. But on latest canary chrome 52.0.2713.0, the issue is not reproducible, so I can deduce that is a hardware handling issue brought on chrome 50 version. (I can't comment the question, so I wrote here some extra info that can be useful)