[Recomendacion] Crear puntos de cualquier color usando una funcion con RGB, sin usar Array

Te felicito, se me hizo muy interesante tu propuesta...pero podrias ayudar explicandome que hace o para que sirve la funcion "Math.floor"....Gracias de antemano.

Claro, anteriormente en otro foro lo explique a detalle, te dejo un ejemplo El docente en todos sus ejemplos a usado esta forma de realizar numeros aleatorios del 1 al 10 con document.write(Math.round(Math.random()*10)); Pero lo cierto es que ese codigo da numeros de 0 al 10, porque teoricamente Math.round devuelve numeros enteros igual o elevado y ramdom devuelve numeros enteros 0.4566645.. etc

<meta charset="UTF-8">
<script>
    for( var i = 0; i < 10; i++) {
        document.write(Math.round(Math.random()*10));
        document.write("<br>");
    }
</script>

Lo ideal es usar Math.floor que devuelve numeros enteros pero no elevados, devolviendo 0 al 9 y al sumarle a Math.random()*10 + 1, aumenta 1 al inicio y final dando los numeros del 1 al 10.

<meta charset="UTF-8">
<script>

    for( var i = 0; i < 10; i++) {
        document.write(Math.floor(Math.random()*10+1));
        document.write("<br>");
    }
</script>

Saludos...

Interesante la manera de ver el cambio de color de fillStyle, en lugar de hacerlo de esta manera, busque la manera de hacer un arreglo de colores y seleccionarlos aleatoriamente para llevar una cuenta por color y las veces que sale entre muchos puntos, a'un no encontre mas forma de mostrar la cuenta sino a travez de alertas, lo comparto:

<canvas width="600" height="800">

</canvas>


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

    pincel.fillStyle = "Lightgrey"; // propiedad
    pincel.fillRect(0,0,600,800); // funcion

    function exibirAlerta(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento);
        alert("Usted hizo un click en el punto: (" + x + ", " + y + ")");
    }
    pantalla.onclick = exibirAlerta;
    var colores = ["yellow", "blue", "red", "cyan", "orange", "white"];
    var contador = 0; 
    var contYellow = 0;
    var contBlue = 0;
    var contRed = 0;
    var contCyan = 0;
    var contOrange = 0;
    var contWhite = 0;

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        var color = colores[Math.round(Math.random()*colores.length)];
        // var red = Math.floor(Math.random() * 256);
        // var green = Math.floor(Math.random() * 256);
        // var blue = Math.floor(Math.random() * 256);
        // var color = "rgb(" + red + ", " + green + ", " + blue + ")";

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

        switch(color){

            case 'yellow' :
                contYellow++;
                alert("Existen " + contYellow + " puntos Amarillos");
                break;
            case "blue" :
                contBlue++;
                alert("Existen " + contBlue + " puntos Azules");
                break;
            case "cyan" :
                contCyan++;
                alert("Existen " + contCyan + " puntos Cyan");
                break;
            case "red" :
                contRed++;
                alert("Existen " + contRed + " puntos Rojos");
                break;
            case "orange" :
                contOrange++;
                alert("Existen " + contOrange + " puntos Naranjas");
                break;
            case "white" :
                contWhite++;
                alert("Existen " + contWhite + " puntos Blancos");
                break;
            };
    }

    function imprimirPonderado(){

    }
    pantalla.onclick = dibujarCirculo;
</script>