CanvasRenderingContext2D: lineWidth property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The
CanvasRenderingContext2D.lineWidth
property of the Canvas 2D API sets the thickness of lines.
Note:
Lines can be drawn with the
stroke()
,
strokeRect()
,
and strokeText()
methods.
Value
Examples
Changing line width
This example draws a line and a rectangle, using a line width of 15 units.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();
Result
More examples
For more examples and explanation about this property, see Applying styles and color in the Canvas Tutorial.
Specifications
Specification |
---|
HTML # dom-context-2d-linewidth-dev |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
lineWidth |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- The interface defining this property:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineCap
CanvasRenderingContext2D.lineJoin
- Applying styles and color