[Proyecto] Altura aleatoria del rectángulo + extra

Hola,

agrage una funcion iteradora que vimos en las clases anteriores, recordé las barras de que se mueven con el sonido y se me ocurrio la idea como hacer para dibujar 20 cuadros de diferente tamaños al azar, me costo un poco recordar como se hacia pero con unos cuantos ensallo resulto lo esperado.

<canvas width="12000" height="400"> </canvas> <!-- agrande el ancho para que cupieran las 20 barras -->
<script>
    function dibujarRectangulo(x, y, color, altura) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x, y, 50, altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, 50, altura);
    }



    function cantidadCuadros(cantidad) {  /* funcion iteradora */
        var separador = 0

        for (var iterador = 1; iterador <= cantidad; iterador++) {

            dibujarRectangulo(separador, 50, "green", Math.round(Math.random() * 400)); /* le di mas altura a las barras */

            separador = separador + 50
        }


    }


    cantidadCuadros(20)


</script>