The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1.
Syntax:
context.lineWidth = number;
Property Values:
- number: This property value indicates the number which specifies the line width in terms of pixels. This property ignores the zero, negative, infinity, and NaN values.
Example 1:
<!DOCTYPE html> <html>
<head>
<title>
HTML canvas lineWidth Property
</title>
</head>
<body style = "text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML canvas lineWidth() Property
</h2>
<canvas id="canvas" width="350" height="380"></canvas>
<script>
var canv = document.getElementById("canvas");
var context = canv.getContext("2d");
context.beginPath();
context.lineWidth = 20;
context.moveTo(40, 40);
context.lineTo(200, 150);
context.lineTo(40, 200);
context.strokeStyle = "green";
context.stroke();
</script>
</body>
</html>
|
Output:
Program 2:
<!DOCTYPE html> <html>
<head>
<title>
HTML canvas lineWidth Property
</title>
</head>
<body style = "text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML canvas lineWidth() Property
</h2>
<canvas id="canvas" width="350" height="380"></canvas>
<script>
var canv = document.getElementById("canvas");
var context = canv.getContext("2d");
context.beginPath();
context.lineWidth = 10;
context.strokeStyle ="green";
context.strokeRect(110, 40, 120, 100);
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML canvas lineWidth property are listed below:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Opera