Canvas lineWidth Property
Example
Draw a line with a 10 pixels lineWidth:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
// Begin a new Path
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(200, 100);
// Draw the Path
ctx.stroke();
Try it Yourself »
More examples below.
Description
The lineWidth property sets or returns the current line width, in pixels.
The default value is 1 pixel.
See Also:
The strokeStyle Property (Set stroke color/style)
The beginPath() Method (Begin a new path)
The moveTo() Method (Move the path to a point)
The lineTo() Method (Add a line to the path)
The stroke() Method (Draw the current path)
The strokeRect() Method (Draw a rectangle)
Syntax
| context.lineWidth = number |
Property Values
| Value | Description | Play it |
|---|---|---|
| number | The current line width, in pixels | Play it » |
Example
Draw a rectangle with a 10 pixels lineWidth:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100);
Try it Yourself »
Browser Support
The <canvas> element is an HTML5 standard (2014).
lineWidth is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
