Tricky JavaScript global composite operation task - Draw in overlap of two larger circles while excluding the overlap of 2 smaller circles

Question

I'm having a hard time drawing this problem using only one canvas. Global composite operations sort of feel like building a plane while flying it.

There are 2 sets of 2 circles, each set has the same center but a different radius. The overlapping area for the larger circles should be filled in, excluding the area of the smaller circles. Any assistance would be much appreciated.

My desired output would be something along these lines.

I often start getting some desired features and then my lack of skill using globalcompositeoperation catches up to me.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();

ctx.globalCompositeOperation = "xor";

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(250, 150, 100, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();

ctx.globalCompositeOperation = "source-in";

ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(150, 150, 120, 0, 2 * Math.PI); // Adjusted position
ctx.fill();
ctx.closePath();

<canvas id="myCanvas" width="400" height="400"></canvas>