context.beginPath();

context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "yellow";
context.fill();
context.stroke();
context.closePath();

/////

context.beginPath();

context.arc(400,300, 200, 0, Math.PI*2, true);
//context.restore();

///context.arc(400,300, 100, 0, Math.PI*2, true);
// Undo the clipping
//context.clip();

context.strokeStyle = "red";

context.lineWidth = 20;

context.fillStyle = "green";

context.fill();

context.stroke();

context.closePath();

///////////////////////

context.beginPath();

///context.arc(400,300, 200, 0, Math.PI*2, true);
//context.restore();

context.arc(400,300, 100, 0, Math.PI*2, true);
// Undo the clipping
context.clip();

context.strokeStyle = "red";

context.lineWidth = 20;

//context.fillStyle = "green";

//context.fill();

context.stroke();

context.closePath();