Meu código ficou assim.

Elton, tudo bom? Fiz um teste aqui, tudo certo. Parabéns.

Não esqueça de deixar essa questão como solucionada para que ela saia da lista de questões sem solução do fórum.

Cara, maneiro!

O meu código ficou mais simples, deixei de usar o 'for'. Ficou assim:

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

<script>

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

function drawGreenRect(x) {
    pincel.fillStyle = 'green'
    pincel.fillRect(x,0, 50, 50);
    pincel.strokeRect(x,0, 50, 50);
}
function drawStroke(x) {
    pincel.strokeRect(x,0,50,50);
}
drawGreenRect(0);
drawGreenRect(50);
drawGreenRect(100);
drawStroke(150);

</script>

Uma coisa que eu tenho para acrescentar em relação ao teu código é que o StrokeRect, via de regra, já é preto, então é desnecessária aquela linha que você define: pincel.fillStroke = "black". Sem ela o código funciona da mesma forma.

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

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

function desenhaFracao(x,y,cor){
    pincel.fillStyle = cor;
    pincel.fillRect(x,y,50,50);  
    pincel.strokeRect(x,y,50,50); 
} 
for(var x = 0; x < 150 ; x=x+50) { 
   desenhaFracao(x,0,'green'); 
}
desenhaFracao(x,0,'white');

</script>

Outra coisa que eu gosto é deixar o var tela e pincel fora das funções, mas acho que isso é questão de gosto mesmo.

Abraço!

Obrigado pela as orientações, desta forma vou aperfeiçoando mais .