JavaScript में canvas में लाइनों की मोटाई बदलना

लाइन की मोटाई lineWidth गुण का उपयोग करके निर्धारित की जाती है। बस इसे एक मोटाई निर्दिष्ट करें, उदाहरण के लिए इस तरह: lineWidth = 5 - इससे 5px मोटाई की एक रेखा प्राप्त होगी। आइए एक उदाहरण देखें:

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; // 5px मोटाई
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

मोटाई को समोच्च (कॉन्टूर) के लिए भी बदला जा सकता है, उदाहरण के लिए, 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();

Результат: