Haz lo que hicimos en el aula

¡Hola José!

En tu código, estás utilizando la etiqueta canvas para dibujar cuadrados de diferentes colores en la pantalla. El código que tienes actualmente utiliza un bucle for para dibujar los cuadrados en la pantalla.

Si lo que deseas es utilizar un bucle while en lugar de un bucle for, simplemente comenta el código del bucle for y descomenta el código del bucle while. Tu código quedaría así:

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>
    
    
    function dibujarCuadrado(x,y,color){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.strokeStyle = "black"; 
        pincel.fillRect(x,y,50,50);
        pincel.strokeRect(x,y,50,50); 
    }

    var x = 0;
    while(x < 600){
        dibujarCuadrado(x,0,"red");
        dibujarCuadrado(x,50,"yellow");
        dibujarCuadrado(x,100,"green");
        x= x + 50;
    }

    /*
    for(var x = 0; x < 600; x = x + 50){
        dibujarCuadrado(x,0,"red");
        dibujarCuadrado(x,50,"yellow");
        dibujarCuadrado(x,100,"green");
    }
    */

</script>

Espero que esto te haya ayudado. ¡Buenos estudios!