Proprietà lineCap

La proprietà lineCap definisce l'aspetto della fine della linea. Può assumere i seguenti valori: butt - fine piatta (predefinita), round - fine arrotondata, square - fine quadrata.

Sintassi

contesto.lineCap = 'butt' o 'round' o 'square';

Esempio

Disegniamo diverse linee e per la prima impostiamo il valore butt, per la seconda - round, per la terza - square. Fate attenzione alla linea rossa - essa segna l'inizio stabilito della linea (mentre round e square si estendono oltre essa):

<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.lineCap = 'butt';
ctx.moveTo(75, 50);
ctx.lineTo(75, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.moveTo(105, 50);
ctx.lineTo(105, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = 'square';
ctx.moveTo(135, 50);
ctx.lineTo(135, 150);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.strokeStyle = 'red';
ctx.moveTo(60, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Vedi anche

proprietà lineJoin,
che definisce lo stile della giunzione delle linee
proprietà miterLimit,
che limita la lunghezza dell'angolo acuto
proprietà lineCap,
che definisce l'aspetto della fine della linea
proprietà lineWidth,
che definisce lo spessore della linea