Proprietà miterLimit

La proprietà miterLimit regola l'acuminatezza della giunzione tra due linee nel caso in cui la proprietà lineJoin sia impostata sul valore miter. Come regola: se la lunghezza dell'angolo risulta maggiore del numero impostato in miterLimit, allora la giunzione delle linee si comporta come se lineJoin fosse impostato sul valore bevel.

Di default miterLimit ha valore 10. Non è possibile impostare un valore inferiore a 1.

Sintassi

contesto.lineJoin = 'miter' o 'round' o 'bevel';

Esempio

Ora la proprietà lineJoin è impostata sul valore miter, ma finché non ci sono limitazioni, l'angolo è acuto:

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

Esempio

E ora impostiamo una limitazione con 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();

Vedi anche

proprietà lineCap,
che imposta l'aspetto della fine della linea