consulta acerca del largo y el alto

el el ejemplo del video se hizo un rectangulo, una pizarra, de 600 * 400 Entendí bien la función de asignar color y bajo que parámetros ese color se asignara; sin embargo, intente colocar un cuadra de color azul en la parte inferior de la parte blanca de la bandera de italia. Lo hice así:

drawPincel.fillStyle = "blue" drawPincel.fillRect(200,200,400,400)

la parte de fillRect, de acuerdo al video, la entendi como (iX,iY,fX,fY) iX es el inicio horizontal del eje X, yo se lo asigne en 200 iY es el inicio vertical del eje Y, yo se lo asigne en 200 fX es el final horizontal del eje X, yo se lo asigne en 400 (para que vaya del pixel 200 hasta el 400) fY es el final vertical del eje Y, yo se lo asigne en 400 ((para que vaya del pixel 200 hasta el 400)

el punto es que la parte del final de X y Y no es siguiendo la regla de 0 a 600 de X, o de 0 a 400 de Y, sino de cuentos pixeles individuales será cada uno

Entonces, para que salga ese cuadrado en la parte inferior de la parte blanca de la bandera de italia, color azul, la medida correcta seria: drawPincel.fillStyle = "blue" drawPincel.fillRect(200,200,200,200)

ahpi a X le estoy diciendo que lo que cree va, tanto horizontal como verticalmente, 200 pixeles hacia esa dirección, independientemente hasta donde pare, solo 200.

Miren:

<canvas width="600" height ="400">    // esto es alto y largo</canvas>


<script>
    document.write("<h2>Holi mor</h3>")

    var display = document.querySelector("canvas");
    var drawPincel = display.getContext("2d"); //este es el pincel


    drawPincel.fillStyle = "white"
    //lo ade abajo llena primero el largo, y luego el alto. En ese orden e primero X, que es el eje Horizontal; luego y, que es el eje vertical.
    drawPincel.fillRect(0,0,600,400);
                //los cutravalores aca son:
                    //los dos primeros son [Iniciar X - Iniciar Y], los dos ultimos son [terminar X - Terminar Y]

    drawPincel.fillStyle = "green";
    drawPincel.fillRect(0,0,200,400)

    drawPincel.fillStyle = "red"
    drawPincel.fillRect(400,0,600,400)

    drawPincel.fillStyle = "blue"
    drawPincel.fillRect(200,200,400,400)


</script>

luego, ya corregido sería

<canvas width="600" height ="400">    // esto es alto y largo</canvas>


<script>
    document.write("<h2>Holi mor</h3>")

    var display = document.querySelector("canvas");
    var drawPincel = display.getContext("2d"); //este es el pincel


    drawPincel.fillStyle = "white"
    //lo ade abajo llena primero el largo, y luego el alto. En ese orden e primero X, que es el eje Horizontal; luego y, que es el eje vertical.
    drawPincel.fillRect(0,0,600,400);
                //los cutravalores aca son:
                    //los dos primeros son [Iniciar X - Iniciar Y], los dos ultimos son [terminar X - Terminar Y]

    drawPincel.fillStyle = "green";
    drawPincel.fillRect(0,0,200,400)

    drawPincel.fillStyle = "red"
    drawPincel.fillRect(400,0,600,400)

    drawPincel.fillStyle = "blue"
    drawPincel.fillRect(200,200,200,200)


</script>

me tome el trabajo de escribir eso, porque es una corrección muy importante que creo que se debe hacer en el video, para evitar confusiones.