How to create overlapping - not stacking - shapes with canvas?

How to create overlapping - not stacking - shapes with canvas?



I'm trying to create an array of shapes that overlap. But I'm having

difficulty preventing those shapes stacking on top of one-another.

I guess I want them to mesh together, if that makes sense?

Here's the code:

var overlap_canvas = document.getElementById("overlap");

var overlap_context = overlap_canvas.getContext("2d");

var x = 200;

var y = x;

var rectQTY = 4 // Number of rectangles

overlap_context.translate(x,y);

for (j=0;j<rectQTY;j++){ // Repeat for the number of rectangles

// Draw a rectangle

overlap_context.beginPath();

overlap_context.rect(-90, -100, 180, 80);

overlap_context.fillStyle = 'yellow';

overlap_context.fill();

overlap_context.lineWidth = 7;

overlap_context.strokeStyle = 'blue';

overlap_context.stroke();

// Degrees to rotate for next position

overlap_context.rotate((Math.PI/180)*360/rectQTY);

}

And here's my jsFiddle: http://jsfiddle.net/Q8yjP/

And here's what I'm trying to achieve: http://postimg.org/image/iio47kny3/

Any help or guidance would be greatly appreciated!