Propriedade lineCap do canvas HTML

Manual de referência do Canvas HTML5

Definição e uso

lineCap Propriedade que define ou retorna o estilo do extremo da linha.

Notas:"round" e "square" tornará a linha ligeiramente mais longa.

Exemplo

Fim da linha de desenhamento do círculo:

O seu navegador não suporta a tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();

Experimente você mesmo

Sintaxe

context.lineCap="butt|round|square";

Valor do atributo

Valor Descrição
butt Padrão. Adicionar bordas retas a cada extremidade da linha.
round Adicionar um canto circular a cada extremidade da linha.
square Adicionar um canto quadrado a cada extremidade da linha.

Detalhes técnicos

Valor padrão: butt

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou completamente essa propriedade pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Manual de referência do Canvas HTML5