Haz lo que hicimos en el aula | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

CODE HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--Dentro de la etiqueta canas podemos crear una pizarra
    para realizar diseños para ello definimos su area-->
    <canvas width="600" height="400"></canvas>
    <script>
        // Creamos una region donde el usuario puede dar clic y recbir un msg
        // por fuera de dicha area no sucede nngun evento
        var pantalla =document.querySelector('canvas');
        var pincel=pantalla.getContext("2d");

        pincel.fillStyle="grey";
        pincel.fillRect(0,0,600,400);

        //pantalla.onclick=exibirAlerta;
        pantalla.onclick=dibujarCirculo;

        function exibirAlerta(evento){
            console.log(evento);
            //capturar cordenadas
            //En este paso se debe eliminar el offset que tiene por defecto el area definida
            // de esta manera podemos garantizar que el cursor tome coordenadas precisas dentro de el area 
            var x=evento.pageX - pantalla.offsetLeft;
            var y=evento.pageY - pantalla.offsetTop;
            console.log(evento);

            alert("Coordenadas: (" +x+";"+y+")");
        }


        function dibujarCirculo(evento){
            var x=evento.pageX - pantalla.offsetLeft;
            var y=evento.pageY - pantalla.offsetTop;

            pincel.fillStyle="blue";
            pincel.beginPath();
            pincel.arc(x,y,10,0,2*3.14);
            pincel.fill();
            console.log(x+";"+y);
        }


    </script>
</body>
</html>