Để gắn góc bo tròn hay vuông hai đầu cho đường thẳng trong HTML5 Canvas, chúng ta sử dụng thuộc tính lineCap. lineCap có 3 giá trị: butt, round, và square. Giá trị mặc định là butt.

Cú pháp:

1

context.lineCap=[value];
 
Chú ý: Khi thêm cap kiểu round (bo tròn) hoặc square (vuông) chiều dài của đường thẳng sẽ tăng lên một khoảng bằng chiều rộng đường thẳng. Ví dụ đường thẳng dài 100px và rộng 10px, khi chúng ta gán  cho đường thẳng này 1 trong hai kiểu cap này thì chiều dài đường thẳng sẽ là 110px. Bởi vì mỗi đầu được thêm 5px cho phần cap.
 
Đầu tiên trong chúng ta đặt thẻ Canvas vào trong body
<canvas id="myCanvas" width="578" height="200"></canvas>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // butt line cap (top line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 - 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "butt";
    context.stroke();
 
    // round line cap (middle line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2);
    context.lineTo(canvas.width - 200, canvas.height / 2);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "round";
    context.stroke();
 
    // square line cap (bottom line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 + 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "square";
    context.stroke();
};

Kết quả: