HTML5 Clip canvas overrides previous clip

Question

I have this weird problem, where setting several rectangles of a clip in HTML5 causes the drawing to bleed / overlap in the previous boxes of the clip, even when each of them is contained in ctx.save () - ctx.restore ().

Here is a sample code:

var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");

// 1st clip
ctx.save();
ctx.rect(20,20,100,100);
ctx.stroke();
ctx.clip();
// draw red rectangle after 1st clip()
ctx.fillStyle="red";
ctx.fillRect(0,0,300,140);
ctx.restore();

// 2nd clip
ctx.save();
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();
// draw blue rectangle after 2nd clip
ctx.fillStyle="blue";
ctx.fillRect(0,0,300,140);
ctx.restore();

And jsfiddle: http://jsfiddle.net/4eXw9/1/

Is there a way to stop a clip from bleeding / overlapping previous clips?

Answer 1

In the second clip is missing beginPath():

// 2nd clip
ctx.save();
ctx.beginPath()
ctx.rect(140,20,100,100);
ctx.stroke();
ctx.clip();

Modified violin

, , , / - / . , , beginPath(). clip()..