Svojstvo miterLimit

Svojstvo miterLimit reguliše oštrinu spajanja dve linije u slučaju kada je svojstvo lineJoin postavljeno na vrednost miter. Kako reguliše: ako je dužina ugla veća od broja zadatog u miterLimit, onda se spajanje linija ponaša kao da je lineJoin postavljen na vrednost bevel.

Podrazumevano, miterLimit ima vrednost 10. Vrednost manja od 1 se ne može postaviti.

Sintaksa

kontekst.lineJoin = 'miter' ili 'round' ili 'bevel';

Primer

Trenutno je svojstvo lineJoin postavljeno na vrednost miter, ali za sada nema ograničenja, ugao je oštar:

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

Primer

A sada postavimo ograničenje pomoću 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();

Pogledajte takođe

svojstvo lineCap,
koje zadaje oblik kraja linije