<script>

// CANVAS

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

canvas.addEventListener("click", clearCanvas);
canvas.addEventListener("mousemove", mouseCoords);

// IMAGE

var img = new Image();
img.src = "santi.jpg";

var loaded = false;

img.addEventListener("load", function() { loaded = true; });

// GLOBAL VARIABLES

var stage, mouseX, mouseY;

/// MOUSE COORDINATES

function mouseCoords(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
document.getElementById('display').innerHTML = mouseX + " // " + mouseY;
draw();
}

/// CLEAR CANVAS

function clearCanvas() {
context.clearRect(0,0,canvas.width, canvas.height);
}

/// DRAW

function draw() {

var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);

if (loaded) {
context.beginPath();
context.drawImage(img, mouseX-img.width/2,mouseY-img.height/2,img.width,img.height);
context.rect(mouseX-img.width/2,mouseY-img.height/2,img.width,img.height);
context.fillStyle = "rgba("+r+","+g+","+b+",0.4)";
context.fill();
context.closePath();
} else {
document.getElementById('display').innerHTML = "IMAGE NOT LOADED";
}

}

</script>