¡Hola!
Entiendo que en un inicio esta función pueda ser un poco compleja de entender, pero para eso estamos, para ayudarte a comprender.
En efecto, si tu canvas tiene 600 pixeles de ancho y 400 pixeles de alto, entonces estamos hablando de algo así:
Y
400 --------------------------------
300 - -
200 - -
100 - ------------------------------
0 100 200 300 400 500 600 X
Ahora bien, la función fillRect se expresa así:
fillRect(x, y, x1, y1) siendo x e y las posiciones iniciales y x1 e y1 las posiciones finales.
Entonces, en el ejemplo, fillRect(400, 0, 200, 400) marca tu gráfico comenzando en la posición 400 del eje X y en la posición 0 del eje Y:
Y
400 --------------------------------
300 - -
200 - -
100 - -----------------X------------
0 100 200 300 400 500 600 X
Luego avanza 200 pixeles en el eje X y 400 en el eje Y
Y
400 ------------------------------X
300 - -
200 - -
100 - -----------------X----------X
0 100 200 300 400 500 600 X
Y luego solo rellena.
Y
400 ------------------ XXXXXXXXXXX
300 - -----------------XXXXXXXXXXX
200 - -----------------XXXXXXXXXXX
100 - -----------------XXXXXXXXXXX
0 100 200 300 400 500 600 X
¿Se comprende mejor así?
