Thay đổi kích thước đường kẻ trong canvas bằng JavaScript

Độ dày của đường kẻ được thiết lập thông qua thuộc tính lineWidth. Chỉ cần gán cho nó một giá trị độ dày, ví dụ như sau: lineWidth = 5 - sẽ tạo ra đường kẻ có độ dày 5px. Hãy xem ví dụ:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.lineWidth = 5; // độ dày 5px
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Độ dày cũng có thể thay đổi cho các đường viền, ví dụ như được vẽ bằng rect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.lineWidth = 5;
ctx.stroke();

Результат: