Uma dúvida, a propriedade para cor da borda aparece ali como strokeFill, mas não funcionou para mim. Existe a strokeFill ou devemos usar a propriedade abaixo?
pincel.strokeStyle = "black";
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
Uma dúvida, a propriedade para cor da borda aparece ali como strokeFill, mas não funcionou para mim. Existe a strokeFill ou devemos usar a propriedade abaixo?
pincel.strokeStyle = "black";
Oi Henrique, tudo bem? Onde viu essa propriedade strokeFill? Até onde sei existem a strokeStyle e fillStyle, strokeStyle eu não encontrei não.
Vi no vídeo do Flávio, estava lá "fillStroke", mas ao tentar essa propriedade ela não funcionou. Dai vi no auto complete da IDE que existia o strokeStyle, e esse funcionou, para alterar a cor da borda.
Oi Andre, separados sim, eu vi, mas essa marcação separada é no HTML, CSS, mas no JS, ela é diferente. E você me mandou o link da documentação do SVG e não do CANVAS.
A do Canvas é essa daqui: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
E aqui você pode vê-las separadas, mas juntas não: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
Henrique, me manda o link de qual vídeo foi por favor?
Oi Wanderson é esse video aqui: https://cursos.alura.com.br/course/logica-programacao-pratica-com-desenho-animacoes-em-jogo/task/21883
Oi Henrique, acho que você inverteu, no vídeo está fillStroke e não strokeFill como você descreve na dúvida.
Sim eu escrevi invertido da primeira vez, mas não achei nenhuma referência a "fillStroke", só ao "strokeStyle": http://tutorials.jenkov.com/html5-canvas/stroke-fill.html
Tentei o "fillStroke" e não funcionou, a cor da borda é por default black, então no vídeo não deu para perceber, mas ao tentar trocar de cores essa propriedade não funciona, somente o "strokeStyle".
Acredito que ela não exista, o não possua mais suporte no Chrome?
É Henrique, realmente, também não achei referência, acredito que possa ter sido um erro de digitação. Porém, você já resolveu o problema não é mesmo?
Pois é a falta de referência dessa propriedade me deixou na dúvida. Olha caso exista somente a "strokeStyle", acho que podemos encerrar esse tópico como resolvido :)
Então Gente. strokeStyle define a cor da borda ou contorno. Ela deve ser combinada com lineWidth (no caso de uma linha ou lineTo) Porém, para produzir a borda, é preciso que exista stroke(). Exemplo de código:
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela = document.querySelector("#tela");
var pincel = tela.getContext("2d");
pincel.fillStyle="#ff0000";
pincel.strokeStyle="#000000";
pincel.beginPath();
pincel.moveTo(300, 100);
pincel.lineTo(320, 80);
pincel.lineTo(360, 80);
pincel.lineTo(380, 100);
pincel.lineTo(380, 130);
pincel.lineTo(300, 200);
pincel.lineTo(220, 130);
pincel.lineTo(220, 100);
pincel.lineTo(240, 80);
pincel.lineTo(280, 80);
pincel.lineTo(300, 100);
pincel.lineWidth = 5;
pincel.stroke();
pincel.fill();
</script>Oi Henrique, marca o tópico como solucionado no post que solucionou sua dúvida por favor? Tenta não deixar os tópicos em aberto.