<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) {
for (var i=0; i<=mouseX/100; i+=0.05) {

var r = Math.round(mouseX/canvas.width * 255);
var g = Math.round(mouseY/canvas.height * 255);
var b = 255 - r;

context2.beginPath();
context2.moveTo(0,0);
context2.quadraticCurveTo(mouseX/2, mouseY/2, canvas.width/4, canvas.height/4);
context2.quadraticCurveTo(canvas.width/4 - mouseX/4, canvas.height/4 - mouseY/4, 0, 0);
context2.closePath();
context2.fillStyle = "rgb("+r+","+g+","+b+")";
context2.fill();
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>