Internet Explorer 10 canvas clipping unexpected behavior

Question

In an html5 canvas application I use clipping to redraw damaged parts of the canvas like so:

ctx.beginPath();
ctx.rect(30, 30, 100, 100);
ctx.rect(100, 100, 100, 100);
ctx.clip();
ctx.clearRect(0, 0, 600, 400);

I also created a fiddle which illustrates the problem. On every capable browser except IE10 it will display two black overlapping rectangles.

Now the question is whether this is a IE10 bug or because it adheres to the standards more closely it is actually expected behavior and just luck that it works in every other browser. If so, what would be the correct way of doing this?

Answer 1

one possible circumvention of this obvious IE10 bug is to clear the rectangles one by one. one advantage: its faster as it doesn't require setting a clip