Ayuda | Lógica de programación: Practicando con juegos y animaciones

Alguien puede revisar el código, estoy seguro que he seguido bien los pasos del instructor en el video, pero al momento de ejecutarlo, al hacer click en cualquier parte solo me marca en una coordenada (8,8) por mas que de click en otra parte.

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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

    function exibirAlerta(evento) {
        var x = evento.pageX = pantalla.offsetLeft;
        var y = evento.pageY = pantalla.offsetTop;
        console.log(evento);
        alert(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);
    }

    //pantalla.onclick = exibirtAlerta;
    pantalla.onclick = dibujarCirculo;

</script>

Hola Cristian Morales Alvarez, tenes un pequeño error en tu código. En las funciones exibirAlerta y dibujarCirculo, al evento.pageX le tenés que restar el pantalla.offsetLeft y al evento.pageY le tenés que restar el pantalla.offsetTop.

Las dos funciones con las correcciones hechas quedarían asi:

function exibirAlerta(evento) {
    var x = evento.pageX - pantalla.offsetLeft;           //corrección: entre el evento.pageX y pantalla.offsetLeft cambiar el = por un -
    var y = evento.pageY - pantalla.offsetTop;            //corrección: entre el evento.pageY y pantalla.offsetTop cambiar el = por un -
    console.log(evento);
    alert(x + "," + y);
}

function dibujarCirculo(evento) {
    var x = evento.pageX - pantalla.offsetLeft;           //corrección: entre el evento.pageX y pantalla.offsetLeft cambiar el = por un -
    var y = evento.pageY - pantalla.offsetTop;            //corrección: entre el evento.pageY y pantalla.offsetTop cambiar el = por un -

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

El código completo con las correciones hechas quedaría asi:

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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

    function exibirAlerta(evento) {
        var x = evento.pageX - pantalla.offsetLeft;          //corrección: entre el evento.pageX y pantalla.offsetLeft cambiar el = por un -
        var y = evento.pageY - pantalla.offsetTop;          //corrección: entre el evento.pageY y pantalla.offsetTop cambiar el = por un -
        console.log(evento);
        alert(x + "," + y);
    }

    function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;          //corrección: entre el evento.pageX y pantalla.offsetLeft cambiar el = por un -
        var y = evento.pageY - pantalla.offsetTop;          //corrección: entre el evento.pageY y pantalla.offsetTop cambiar el = por un -

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

    //pantalla.onclick = exibirtAlerta;
    pantalla.onclick = dibujarCirculo;

</script>

Si este post te ayudó, por favor marca como solucionado ✓