<meta charset="utf-8">
<canvas width="600" height="400">
</canvas>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "grey" //Propiedad
pincel.fillRect(0,0,600,400) //Funcion
function showMessage(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
console.log(evento)
alert(x+ ", " + y)
}
function drawCricle(evento) {
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pincel.fillStyle="green"
pincel.beginPath();
pincel.arc(x,y,40,0,2*3.14)
pincel.fill()
coordenadas=(x+ ", " + y)
pincel.font="15px Georgia";
pincel.fillStyle="black";
pincel.fillText(coordenadas, x-17, y);
}
pantalla.onclick = drawCricle
</script>