Gets or sets the current line width, in pixels.
![]() |
Syntax
| JavaScript | |
|---|
Property values
Type: Floating-point
Standards information
- HTML Canvas 2D Context, Section 6
Examples
The following code example draws a series of lines by using increasing values for the lineWidth property.
<html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var lStart = 0;
var lEnd = 200;
var yStart = 5;
for (i = 1; i < 16; i++) {
ctx.lineWidth = i;
ctx.beginPath();
yStart = yStart + (i * 2) + ctx.lineWidth;
ctx.moveTo(lStart, yStart);
ctx.lineTo(lEnd, yStart);
ctx.stroke();
ctx.textBaseline = "middle";
ctx.fillText(ctx.lineWidth, lEnd + 10, yStart);
}
}
}
</script>
</head>
<body onload="draw();">
<canvas id="MyCanvas" width="300" height="600">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
.png)
.png)