Canvas lineWidth Property

❮ Canvas Reference

Example

Draw a line with a 10 pixels lineWidth:

YourbrowserdoesnotsupporttheHTML5canvastag.

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:

YourbrowserdoesnotsupporttheHTML5canvastag.

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
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.