Olá Hamilton!
No Canvas, o eixo x representa a largura e o eixo y representa a altura. No exemplo que você postou, o Canvas tem 600 pixels de largura e 400 pixels de altura.
No trecho de código abaixo, o retângulo preto é desenhado a partir do ponto (400, 0) e tem 600 pixels de largura e 400 pixels de altura. Ou seja, ele começa a ser desenhado a 400 pixels da esquerda e 0 pixels do topo do Canvas.
pincel.fillStyle = 'black';
pincel.fillRect(400, 0, 600, 400);
Já o retângulo amarelo começa a ser desenhado a partir do ponto (0, 0) e tem 400 pixels de altura e 400 pixels de largura. Ele começa no canto superior esquerdo do Canvas.
pincel.fillStyle = 'yellow';
pincel.fillRect(0, 0, 400, 400);
O retângulo vermelho começa a ser desenhado a partir do ponto (0, 0) e tem 200 pixels de largura e 400 pixels de altura. Ele também começa no canto superior esquerdo do Canvas.
pincel.fillStyle = 'red';
pincel.fillRect(0, 0, 200, 400);
Por fim, o triângulo branco é desenhado a partir do ponto (300, 200), que está a 300 pixels da esquerda e 200 pixels do topo do Canvas. As outras coordenadas são definidas pelas linhas que conectam os pontos.
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.moveTo(300, 200);
pincel.lineTo(200, 400);
pincel.lineTo(400, 400);
pincel.fill();
Uma imagem que pode ajudar, fora do contexto da aula:
Repare que preciso de duas coodenadas (x e y) para o primeiro ponto.
Espero ter ajudado e bons estudos!
