Entrar Ainda não tem acesso?
2
respostas

fillStroke ou strokeStyle?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por José Ricardo De Moraes Salgueiro
| 90.7k xp | 32 posts
técnico de suporte

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>
2 respostas
por José Ricardo De Moraes Salgueiro
| 90.7k xp | 32 posts
técnico de suporte

` `meu codigo:

por ADALBERTO CALDEIRA BRANT FILHO
| 123.7k xp | 45 posts

Joia, bom dia.

Você tem que usar o strokeRect e determinar a borda, veja abaixo um possível código para resolver sua demanda. Se isso lhe ajudou marque como resolvido. Obrigado.

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();