Coordenadas para criação aritimetica.

Ao criarmos o elemento canvas nós definimos as proporções da tela que trabalharemos. Neste caso o professor está definindo a tela como 600 x 400, sendo assim os limites da nossa tela é 600x (largura) e 400y (altura). O eixo 'x' é a largura da nossa tela e percorre um sentido horizontal, então é um eixo que permite que os elementos na tela se movam de um lado para o outro da tela, do eixo '0x' até '600x'. Já o eixo 'y' é a altura da tela que percorre um sentido vertical, é um eixo que permite que os elementos na tela se movam para cima e para baixo, do eixo '0y' até '400y'.

Porém ao criarmos o elemento canvas, ele não fica centralizado na tela, mas sim no canto superior da tela. Segue um exemplo com suas coordenadas:

<canvas width="600" height="400"></canvas> // Criando proporções

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400); // Definindo coordenadas (mínimoX, mínimoY, máximoX, máximoY) -> onde começa e onde termina

    pincel.fillStyle = 'black' 
    pincel.fillRect(250, 110, 90, 90);  // Primeiro quadrado
    pincel.fillRect(410, 110, 90, 90); // Segundo quadrado
</script>

O código acima cria o seguinte elemento:

Perceba que X e Y começam no eixo 0, e terminam com as mesmas proporções do elemento canvas (600 x 400), estamos pintando toda tela do canvas de cinza. Bom, agora que você sabe os limites da tela do canvas fica mais fácil entender por que ambos quadrados estão em tais posições, analise as coordenadas dos quadrados e compare com o plano de coordenadas do canvas:

<script>
    pincel.fillStyle = 'black' 
    pincel.fillRect(250, 110, 90, 90);  // Primeiro quadrado (x, y, x, y)
    pincel.fillRect(410, 110, 90, 90); // Segundo quadrado  (x, y, x, y)
</script>

Obrigada Gabriel, muito bom!