<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var canvas2 = document.createElement('canvas');
var context2 = canvas2.getContext('2d');

canvas2.width = canvas.width;
canvas2.height = canvas.height;

// GLOBAL VARIABLES TO BE DECLARED AT THE BEGINNING
var stage, mouseX, mouseY;

function mouseCoords(event) {

stage = canvas.getBoundingClientRect();
// stage.left is in case you position canvas using css
mouseX = event.clientX - stage.left; // RELATIVE POSITION
mouseY = event.clientY - stage.top;
document.getElementById('display').innerHTML = mouseX + " // " + mouseY;
draw();

}

function draw() {

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

for (var i=0; i<=4; i+=0.05) {

var col = Math.round(mouseX/canvas.width * 255);

context2.beginPath();
context2.rect(0,0,mouseX,mouseY);
context2.closePath();
context2.fillStyle = "rgb("+col+","+col+","+col+")";
context2.strokeStyle = "green";
context2.fill();
context2.stroke();

context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(-Math.PI*i);
context.drawImage(canvas2,0,0);
context.restore();
}

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

}

</script>