Canvas cuadrados en diferentes x, y, y colores

Buenas noches a tod@s, realizando el código y jugando con los parámetros, conseguí realizar esto.

Saludos cordiales y apretón de manos desde Medellín - Colombia

<h1>Dándole borde a la figura y combinando sentido y colores</h1>

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

<script>

    function SaltarLineax4 () {

        document.write("<br><br><br><br>");
        document.write("Creado por: <h5>EstiwarZM</h5>");
        document.write("Asesoría de: <h5>Christian Velasco 'ONE = Oracle - Alura'</h5>");
    }

    function dibujarCuadrado(x){

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

        pincel.fillStyle = "yellow";
        pincel.fillRect(x,0,100,100);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,0,100,100);

    }

    dibujarCuadrado(0);
    dibujarCuadrado(100);
    dibujarCuadrado(200);




    function dibujarCuadrado2(x,y){

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

        pincel.fillStyle = "yellow";
        pincel.fillRect(x,y,100,100);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,100,100);

    }

    dibujarCuadrado2(0,0);
    dibujarCuadrado2(0,100);
    dibujarCuadrado2(0,200);




    function dibujarCuadrado3(x,y,color){

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

        pincel.fillStyle = color;
        pincel.fillRect(x,y,100,100);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,100,100);

    }

    dibujarCuadrado3(0,0,"red");
    dibujarCuadrado3(0,100, "yellow");
    dibujarCuadrado3(0,200, "green");

    SaltarLineax4();

</script>