Inconvenientes con las coordenadas X & Y de pincel.fillRect | Lógica de programación: Practicando con juegos y animaciones

<canvas width = "600" height = "400"> </canvas> <script> var screen = document.querySelector ("canvas"); var paintbrush = screen.getContext ("2d"); paintbrush.fillStyle = "darkgreen"; paintbrush.fillRect (200,50,350,300); paintbrush.fillStyle = "black"; paintbrush.fillRect (175,135,175,225); paintbrush.fillStyle = "black"; paintbrush.fillRect (335,135,175,225); </script>

Hola de vuelta. Creo que ya comprendí el malentendido que tenía, en el vídeo de la bandera había entendido que colocaba X & Y inicial/final respectivamente el pincel.fillRect, pero ya veo que la forma correcta de interpretarlo (y donde quizás yo me confundí o no fue suficientemente resaltada en la explicación) es que X1 y Y1 (SÍ) son las coordenadas iniciales con referencia al (0,0) del canvas y que X2 y Y2 son la cantidad de pixeles que se desplazaría el rectángulo respectivamente y no otro set de coordenadas en las cuales acabara dicho rectángulo. Con dicha interpretación éste fue mi resultado:

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

<script>

    var screen = document.querySelector ("canvas");
    var paintbrush = screen.getContext ("2d");

    paintbrush.fillStyle = "darkgreen";
    paintbrush.fillRect (200,50,350,300);

    paintbrush.fillStyle = "black";
    paintbrush.fillRect (250,110,90,90);
    paintbrush.fillRect (410,110,90,90);

    paintbrush.fillRect (340,200,70,100);
    paintbrush.fillRect (300,240,40,110);
    paintbrush.fillRect (410,240,40,110);

</script>