Propriedade miterLimit

A propriedade miterLimit regula a acuidade da junção de duas linhas no caso em que a propriedade lineJoin é definida como miter. Como regula: se o comprimento do ângulo for maior que o número definido em miterLimit, então a junção das linhas se comporta como se lineJoin estivesse definido como bevel.

Por padrão, miterLimit tem o valor 10. Não é possível definir seu valor para menos de 1.

Sintaxe

contexto.lineJoin = 'miter' ou 'round' ou 'bevel';

Exemplo

Agora a propriedade lineJoin está definida como miter, mas como não há nenhuma restrição, o ângulo é agudo:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Exemplo

E agora vamos definir uma restrição usando miterLimit:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 10;
ctx.miterLimit = 1;
ctx.moveTo(50, 140);
ctx.lineTo(100, 30);
ctx.lineTo(150, 140);
ctx.stroke();

Veja também

a propriedade lineCap,
que define a aparência do final da linha