Nada demais, apenas um rascunho:
<canvas width="600" height="400"></canvas>
<script>
function desenhandoQuadrados() {
}
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'green'; //preenchimento do quadrado
pincel.fillRect(0, 0, 50, 50);
pincel.strokeStyle = 'black'; //borda
pincel.strokeRect(0, 0, 50, 50);
pincel.fillStyle = 'pink';
pincel.fillRect(100, 200, 150, 250);
desenhandoQuadrados();
</script>
Olá Rafaela, tudo bem com você?
Eu gostaria antes de tudo agradecer por sua paciência em aguardar um retorno aqui no fórum.
Rafaela, primeiramente parabéns pelo seu código, ele ficou muito bom mesmo, eu gostei muito dele.
E como você mencionou no início do seu tópico uma pergunta falando sobre fillStroke e strokeStyle, eu vou lhe explicar um pouco sobre a diferença entre eles: o fillStroke, na verdade serve para contornar uma figura na cor padrão de contorno, ou seja o preto;
Já o strokeStyle serve para dar ou mudar a cor do contorno de algo em seu programa para uma cor que não é a padrão, no caso o preto.
Agora como você citou que esse código é um rascunho, eu vou apontar algumas coisas que eu percebi no seu rascunho e que podem ser melhoradas.
Para começar, eu percebi que você colocou uma function chamada desenhandoQuadrados(), e dentro dela não tinha nada, e ao final do código você “chamou” ela também, porém ela não fez nada pois não lhe foi atribuído nenhuma ação.
E eu também percebi que você fez um canvas, e posteriormente criou 2 geométricos, contornando o quadrado da cor verde e o retângulo rosa não, e provavelmente por conta disso que você não percebeu que o tamanho do retângulo estendeu-se até uma área fora do limite do canvas.
E no geral o seu código não apresenta erros que o impedem de ser lido e somente precisa de uma leve alteração na estrutura e nos parâmetros usados para que ele fique com um visual melhor.
E para que você tenha uma visualização melhor do que eu estou falando eu irei lhe mandar o seu código reescrito de uma forma que fique mais visualizável o que necessita ser alterado:
<canvas width="600" height="455"></canvas>
<script>
function aparecePincel (x, y, width, height) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.strokeStyle = 'black';
pincel.strokeRect(x, y, width, height);
}
function desenhandoQuadrados(x, y, cor, width, height) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = cor;
pincel.fillRect(x, y, width, height);
aparecePincel(x, y, width, height);
}
desenhandoQuadrados(0, 0, 'green', 50, 50);
desenhandoQuadrados(100, 200, 'pink', 150, 250);
aparecePincel(0, 0, 600, 455);
</script>Eu tomei a liberdade de editar um pouco o código, e coloquei algumas funções extras, resumi um pouco ele, deixei algumas partes mais padronizadas, contornei o retângulo rosa, aumentei o ângulo y do canva, e o contornei também para que você visualize melhor as dimensões do seu código/desenho.
Enfim era isso que eu tinha para lhe dizer, e lembre-se que ao precisar de algo recorra ao nosso fórum, ok ;)
Um grande abraço, e bons estudos!