APORTE AL CODIGO

Basicamente, me emocionó mucho éste ejercicio. Me puse a programarlo como algo que me gustaría ver, entonces basicamente cada vez que haces click, hace un punto de un tamaño y color aleatorios sobre un fondo negro. La verdad no sé si alguien vea esto, pero me emocionó mucho ver lo bonito que es una vez que le añades tus propios detalles al ejercicio. Aca una fotito de evidencia, y pues el código, por si a alguien le interesa.

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

    <script>
    var pantalla = document.querySelector("canvas"); 
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "black"; 
    pincel.fillRect(0,0,600,400);
    var colores = ["LightCoral","Crimson","Pink", "LightPink","HotPink","PaleVioletRed","PeachPuff","Gold","Lavender","Plum","MediumPurple","SlateBlue","LightGreen","MediumAquamarine","DarkSeaGreen","LightSeaGreen","LightCyan","PaleTurquoise","DarkTurquoise","PowderBlue","SkyBlue","LightBlue","HoneyDew","GhostWhite","LavenderBlush"];

    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 = colores[Math.round(Math.random()*colores.length)]; 
        pincel.beginPath();
        pincel.arc(x,y,Math.round(Math.random()*5+5),0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);
    }

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

</script>