codigo con una funcion random

lineas de cuadros q varian en 3 colores y formas

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


</canvas>


<script> 


    function dibujarCuadrado(X,Y,color,ancho,altura){ 
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;  
        pincel.fillRect(X,Y,ancho,altura); 
        pincel.strokeStyle = "white";
        pincel.strokeRect(X,Y,ancho,altura);

    }

    function dibujarVariosRan(X,Y,cantidad){ 
            var color = "red";

        for(repetir = 0;repetir < cantidad;repetir++){
            var radAncho = Math.round(Math.random()*50)+10;
            var radAlto = Math.round(Math.random()*50)+10;
            var radColor = Math.round(Math.random()*3);
            console.log(radColor);
            if(radColor == 1){ 
                 color= "red";
            }
            if(radColor == 2){ 
                 color= "yellow";
            }
            if(radColor == 3){
                color= "green";
            } 

            dibujarCuadrado(X+50*repetir,Y,color,radAncho,radAlto);

        } 
    }

    dibujarCuadrado (0,150,"red",50,50);
    dibujarCuadrado (0,200,"yellow",50,50);
    dibujarCuadrado (0,250,"green",50,50);

    for(repetir = 0;repetir < 10;repetir++){

        dibujarCuadrado (0+50*repetir,300,"red",50,50);
        dibujarCuadrado (0+50*repetir,350,"yellow",50,50);
        dibujarCuadrado (0+50*repetir,400,"green",50,50);
    }

    dibujarVariosRan(0,100,10);
    dibujarVariosRan(0,50,10);
    dibujarVariosRan(0,0,10);





</script>