Segue minha versão comentada:
<canvas width="600" height="400"></canvas> <!--Definição do tamanho do Canvas-->
<script>
//função para desenhar os quadrados delineados e preenchidos
function desenhaQuadrado (x, y, cor){
//Script da tela e do pincel//
var tela=document.querySelector('canvas');
var pincel=tela.getContext('2d');
pincel.fillStyle=cor; // cor de preenchimento do quadrado
pincel.fillRect(x, y, 50, 50); //cordenadas de onde será desenhado o 1º quadrado
pincel.fillStroke = 'black'; // cor da borda - separação visual dos quadrados
pincel.strokeRect(x, y, 50, 50); // posição da borda - mesma do quadrado
}
desenhaQuadrado (0, 0, 'blue'); // chama função colocando o parâmetro y como 0
desenhaQuadrado (0, 50, 'red'); // chama função colocando o parâmetro y como 50
desenhaQuadrado (0, 100, 'yellow'); // chama função colocando o parâmetro y como 100
</script>
