<script>
window.onload = function() {

// ORIGINAL MAIN CANVAS
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// NEW MASK CANVAS = contains shape that masks anything underneath
var maskCanvasN = document.createElement('canvas');
var maskcontext2 = maskCanvasN.getContext('2d');

// USE SAME DIMENSIONS FOR SECOND FLOATING MASK CANVAS
maskCanvasN.width = canvas.width;
maskCanvasN.height = canvas.height;

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

// BLUE BACKGROUND COVERING ENTIRE CANVAS

var yuck = context.createLinearGradient(0, 0, 0, 600);

yuck.addColorStop(0, "white");
yuck.addColorStop(0.5, "red");
yuck.addColorStop(1, "black");

// context.rect(0, 0, canvas.width, canvas.height);
context.arc(canvas.width/2, canvas.height/2, 250, 0, Math.PI*2, true);

context.fillStyle = yuck;
context.fill();

/// END OF BLUE BKGD

// OBJECT TO BE MASKED = LARGE CIRCLE

var yuck2 = context.createLinearGradient(0, 0, 0, 500);

yuck2.addColorStop(0, "blue");
yuck2.addColorStop(0.5, "orange");
yuck2.addColorStop(1, "purple");
//maskcontext2.fillStyle = "yellow";
maskcontext2.fillStyle = yuck2;

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

// Draw the shape you want to take out
maskcontext2.arc(canvas.width/2, canvas.height/2, 100, 0, Math.PI*2);
// maskcontext.rect(100, 100, 300, 300);

// WE NEED THIS FOR EVERYTHING TO WORK
maskcontext2.fill();

context.scale(1,0.5);

// Draw mask on the image, and done !
// drawImage(object to be drawn, x, y);
context.drawImage(maskCanvasN, 0, 300);

////////////////////////////////////// end here

};

</script>