Cor da Borda no Canvas

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.

não viu separados? https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

https://www.w3schools.com/tags/ref_canvas.asp

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.