Oi Aleff, tudo bem?

Obrigado pela paciência em aguardar uma resposta!

Entendi sua dúvida. Ao utilizar o VS Code ou o Sublime para escrever os comandos, o resultado com o código abaixo funciona normalmente.

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 200, 400);

    pincel.fillStyle = 'red';
    pincel.fillRect(400, 0, 200, 400);

</script>

Contudo, o uso do Code Pen torna a escrita do código um pouco diferente, pois neste software há a divisão da linguagem HTML, Javascript e CSS, e cada parte precisa ser escrita em um espaço específico.

No campo referente ao HTML escrevemos:

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

No campo do Javascript escrevemos:

        var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, 200, 400);

    pincel.fillStyle = 'red';
    pincel.fillRect(400, 0, 200, 400);

Para que o código seja bem sucedido não há necessidade de escrever de formas diferenciadas, a menos que se queira acrescentar outras especificações estéticas com o uso do campo do CSS.

Na imagem abaixo mostro os resultados obtidos com o uso do Code Pen para escrever o código:

Cada editor de código-fonte tem suas especificidades que precisam ser respeitadas para que o código funcione adequadamente. Além disso, esteja atento à biblioteca de funcionalidades disponíveis que cada software permite utilizar.

Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição para te auxiliar.

Grande abraço e bons estudos!