Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá, Kellvin, vamos ver se eu entendi a pergunta. Vou usar este exemplo para tentar explicar:
<script>
function desenhaQuadrado(tamanho) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'green';
pincel.fillRect(tamanho, 0, 50, 50);
pincel.strokeStyle = 'black';
pincel.strokeRect(tamanho, 0, 50, 50);
}
desenhaQuadrado(0);
</script>Neste exemplo, o parâmetro tamanho refere-se à primeira coordenada do eixo x (primeiro valor do parênteses).
Ele precisa aparecer tanto no
fillRect (quadrado 1): preenchido (fill, em inglês) com a cor verde, sem contorno
quanto no
strokeRect (quadrado 2): sem preenchimento, com contorno (stroke, em inglês)
Para que seja exibido um quadrado preenchido com uma determinada cor (verde, neste exemplo) e contornado com outra cor (preto), na verdade, é como se desenhássemos dois quadrados, um sobre o outro.
Por isso, os dois devem partir do mesmo ponto (ponto 1: eixo x = 0 e eixo y = 0) e terminar no mesmo ponto (ponto 2: eixo x = 50 e eixo y = 50).
Então, são dois quadrados com as mesmas coordenadas:
um: contornado (preto) e não preenchido com cor
sobre o
outro: preenchido com cor (verde) e não contornado
Entende?
Bons estudos!
Olá Leila, muito obrigado!!!! entendi agora.