Canvas lineWidth: Change Line Thickness with JavaScript

The Canvas lineWidth property controls the thickness of strokes drawn with methods such as stroke(), strokeRect(), and strokeText(). The default value is 1.

Assign a positive finite number before drawing the stroke. The value is measured in the Canvas coordinate system, not as a CSS border width.

Basic lineWidth example Top ↑

<canvas id="myCanvas" width="400" height="180"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(30, 40);
ctx.lineTo(360, 140);
ctx.lineWidth = 10;
ctx.stroke();
</script>

lineWidth syntax and valid values Top ↑

ctx.lineWidth = 6;

lineWidth accepts a positive finite number. The default is 1.0. Assignments of 0, negative numbers, Infinity, or NaN are ignored, so the previously valid width remains in effect.

Value	Result
`1`	Default stroke width.
`8`	Draws an 8-unit-wide stroke.
`0.5`	Valid positive fractional width.
`0` or negative	Ignored; does not set the stroke width to zero.

Interactive lineWidth demo Top ↑

Move the range control to redraw the same line with a different thickness.

Line width: 1

The demo uses values from 1 to 30 so every slider position is valid for lineWidth.

Stroke width is centered on the path Top ↑

Canvas strokes are centered on the path. A 10-unit stroke extends about 5 units to each side of the path. This matters when a thick stroke approaches the Canvas edge or when you are aligning adjoining shapes.

ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(20, 50);
ctx.lineTo(300, 50);
ctx.stroke();

For crisp horizontal and vertical strokes, positioning can matter because Canvas coordinates and device pixels do not always line up one-to-one.

lineWidth with strokeRect() Top ↑

The same property controls the outline thickness created by strokeRect().

const canvas = document.getElementById('myCanvas2');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 12;
ctx.strokeStyle = '#3366cc';
ctx.strokeRect(70, 30, 160, 100);

Combine lineWidth with other stroke properties Top ↑

Thickness is only one part of a Canvas stroke. Combine lineWidth with strokeStyle, lineCap, lineJoin, and setLineDash() to control the appearance of lines.

ctx.lineWidth = 14;
ctx.strokeStyle = '#cc3300';
ctx.lineCap = 'round';
ctx.setLineDash([18, 8]);

ctx.beginPath();
ctx.moveTo(30, 70);
ctx.lineTo(320, 70);
ctx.stroke();

Changing lineWidth between strokes Top ↑

lineWidth is part of the current Canvas drawing state. Set it before the stroke that should use that thickness. Existing pixels already drawn on the Canvas are not changed when you later assign a new value.

ctx.lineWidth = 2;
ctx.strokeRect(20, 20, 100, 70);

ctx.lineWidth = 10;
ctx.strokeRect(160, 20, 100, 70);

Common lineWidth mistakes Top ↑

Using lineWidth = 0 to hide a stroke. Zero is ignored; skip the stroke call or change the drawing logic instead.
Setting lineWidth after calling stroke() and expecting the already-rendered line to change.
Forgetting that a thick stroke extends on both sides of the path.
Confusing lineWidth with CSS width. It controls Canvas strokes, not the CSS size of the <canvas> element.
Using only line thickness to convey meaning. Important differences should also be distinguishable through labels, patterns, text, or another accessible representation.

Accessibility note Top ↑

Changing line thickness can improve visual differentiation, but Canvas pixels do not provide semantic information by themselves. If line width represents data or status, provide an equivalent text, table, label, or other accessible HTML representation.

Frequently asked questions Top ↑

What is the default Canvas lineWidth? Top ↑

The default value is 1.0.

Can Canvas lineWidth be zero? Top ↑

No. Assigning zero is ignored. Use a positive finite number.

Does lineWidth affect strokeRect()? Top ↑

Yes. strokeRect() uses the current lineWidth for its outline.

Why does a thick Canvas line extend outside my coordinates? Top ↑

Because strokes are centered on their path, half of the width is painted on each side.

How do I make thick Canvas lines have rounded ends? Top ↑

Set lineCap = 'round' before drawing the stroke. See the Canvas lineCap tutorial.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Canvas lineWidth: Change Line Thickness