<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.fillStyle = "yellow";

  tempcontext.arc(canvas.width/2, canvas.height/2, 250, 0, Math.PI*2, true);
// Draw the shape OF THE MASK

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

  // tempcontext.rect(100, 100, 300, 300);
// WE NEED THIS FOR EVERYTHING TO WORK

  tempcontext.fill();
context.scale(1,0.5);
// Draw mask on the image, and done !

  // drawImage(object_to_be_drawn, x, y);

  context.drawImage(tempcanvas, -400, 100); 


////////////////////////////////////// end here
};
</script>