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

A number specifying the line width, in coordinate space units. Zero, negative, Infinity, and NaN values are ignored. This value is 1.0 by default.

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 Standard
# dom-context-2d-linewidth-dev

Browser compatibility

BCD tables only load in the browser

See also