fillStroke ou strokeStyle? | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Saudações, foi postado neste link: https://cursos.alura.com.br/course/logica-programacao-pratica-desenho-animacoes-jogo/task/124811 porem nao consigo fazer a borda aparecer. Consultei ate mesmo no forum uma duvida como a minha, mas não vi o funcionamento: https://cursos.alura.com.br/forum/topico-diferenca-de-pincel-fillstroke-e-pincel-strokestyle-red-140265

meu codigo:

`meu codigo:

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>

function desenhaQuadradoVerde() {


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

pincel.fillStyle = 'green';
pincel.fillRect(0, 0, 50, 50);
pincel.strokeStyle = 'red'


pincel.fillStyle = 'blue';
pincel.fillRect(50, 0, 50, 50);
pincel.strokeStyle = 'red'

pincel.fillStyle = 'yellow';
pincel.fillRect(100, 0, 50, 50);
pincel.strokeStyle = 'red'

}



desenhaQuadradoVerde();


</script>

function desenhaQuadradoVerde() { var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); pincel.fillStyle = 'green'; pincel.fillRect(0, 0, 50, 50); pincel.strokeStyle = 'red'; pincel.strokeRect(0, 0, 50, 50); // adiciona borda pincel.fillStyle = 'blue'; pincel.fillRect(50, 0, 50, 50); pincel.strokeStyle = 'red'; pincel.strokeRect(50, 0, 50, 50); // adiciona borda pincel.fillStyle = 'yellow'; pincel.fillRect(100, 0, 50, 50); pincel.strokeStyle = 'red'; pincel.strokeRect(100, 0, 50, 50); // adiciona borda } desenhaQuadradoVerde();