Propriété miterLimit

La propriété miterLimit régule l'acuité de la jonction entre deux lignes dans le cas où la propriété lineJoin est définie sur la valeur miter. Comment elle régule : si la longueur de l'angle est plus grande que le nombre défini dans miterLimit, alors la jonction des lignes se comporte comme si lineJoin était définie sur la valeur bevel.

Par défaut, miterLimit a la valeur 10. Il n'est pas possible de définir sa valeur à moins de 1.

Syntaxe

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

Exemple

Actuellement, la propriété lineJoin est définie sur la valeur miter, mais tant qu'aucune limite n'est fixée, l'angle est aigu :

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

Exemple

Et maintenant, définissons une limite à l'aide de 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();

Voir aussi

la propriété lineCap,
qui définit l'apparence de l'extrémité d'une ligne