Propriété lineCap

La propriété lineCap définit l'apparence de l'extrémité d'une ligne. Peut prendre les valeurs suivantes : butt - extrémité plate (par défaut), round - extrémité arrondie, square - extrémité carrée.

Syntaxe

contexte.lineCap = 'butt' ou 'round' ou 'square';

Exemple

Dessinons plusieurs lignes et définissons pour la première la valeur butt, pour la deuxième - round, pour la troisième - square. Faites attention à la ligne rouge - elle marque le début établi de la ligne (et round et square dépassent au-delà) :

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

Voir aussi

propriété lineJoin,
qui définit le style de la jointure des lignes
propriété miterLimit,
qui limite la longueur de l'angle aigu
propriété lineCap,
qui définit l'apparence de l'extrémité de la ligne
propriété lineWidth,
qui définit l'épaisseur de la ligne