2
respuestas

Dibujando círculos rojos en la posición - evento click

<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 dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft; //pos x
        var y = evento.pageY - pantalla.offsetTop; //pos y

        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*(Math.PI));
        pincel.fill();
        console.log(x+" - "+y);
    }

    pantalla.onclick = dibujarCirculo;

</script> 
2 respuestas

Hola Alexander, espero que estés bien!

Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos!

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

Hola Alexander, gracias por compartir tu trabajo, probé tu código y está perfecto. Saludos cordiales