<script>
window.onload = function() {
	
// ORIGINAL MAIN CANVAS
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start here

  // NEW MASK CANVAS = contains shape that masks anything underneath

  var tempcanvas = document.createElement('canvas');

  var tempcontext = tempcanvas.getContext('2d');
// USE SAME DIMENSIONS FOR SECOND FLOATING MASK CANVAS

  tempcanvas.width = canvas.width;

  tempcanvas.height = canvas.height;
context.beginPath();
// RED BACKGROUND COVERING ENTIRE CANVAS

  context.fillStyle = "red";

  context.rect(0, 0, canvas.width, canvas.height);

  context.fill();
// OBJECT TO BE MASKED = LARGE CIRCLE

  tempcontext.beginPath();

  tempcontext.fillStyle = "yellow";

  tempcontext.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI*2, true);

  tempcontext.fill();
// EXTRACTION OR ADDITION METHOD

  tempcontext.globalCompositeOperation = "xor"; // extract intersection

  // tempcontext.globalCompositeOperation = "source-atop"; // removes overlay 

  // tempcontext.globalCompositeOperation = "source-in"; // removes overlay 

  // tempcontext.globalCompositeOperation = "source-out"; // extract intersection

  // tempcontext.globalCompositeOperation = "source-over"; // nothing so far

  // tempcontext.globalCompositeOperation = "destination-atop"; // removes intersection from floating mask

  // tempcontext.globalCompositeOperation = "destination-in"; // eliminates floating ares of the mask

  //tempcontext.globalCompositeOperation = "destination-out"; // extracts all the mask and bites the object

  //tempcontext.globalCompositeOperation = "destination-over"; // sames as destination atop

  //tempcontext.globalCompositeOperation = "lighter";

  //tempcontext.globalCompositeOperation = "darker";

  // tempcontext.globalCompositeOperation = "copy"; 
// SHAPE OF THE MASK

  tempcontext.beginPath();

  tempcontext.fillStyle = "green";

  tempcontext.arc(150, 150, 100, 0, Math.PI*2);

  tempcontext.fill();
// context.drawImage(object_to_be_drawn, x, y);

  context.drawImage(tempcanvas, 100, 100); 
//////////// END HERE
};
</script>