Свойство lineCap

Свойство lineCap задава вида на края на линията. Може да приема следните стойности: butt - плосък край (по подразбиране), round - заоблен край, square - квадратен край.

Синтаксис

контекст.lineCap = 'butt' или 'round' или 'square';

Пример

Нека нарисуваме няколко линии и на първата да зададем стойност butt, на втората - round, на третата - square. Обърнете внимание на червената линия - тя маркира зададеното начало на линията (а round и square излизат отвъд нея):

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

Вижте също

свойство lineJoin,
което задава стил на пречупване на линията
свойство miterLimit,
което ограничава дължината на остър ъгъл
свойство lineCap,
което задава вида на края на линията
свойство lineWidth,
което задава дебелината на линията