YouTipCanvas Linewidth
# HTML5 Canvas `lineWidth` Property
The `lineWidth` property of the Canvas 2D API sets or returns the current thickness of lines drawn on the canvas, measured in coordinate space units (pixels).
---
## Introduction
When you draw paths, lines, or shapes using the HTML5 Canvas, the `lineWidth` property determines how thick those strokes will be. By default, every canvas context starts with a line width of `1.0` pixel.
This property affects all subsequent stroke operations, such as `stroke()`, `strokeRect()`, and `strokeText()`, until it is explicitly changed.
---
## Syntax & Usage
### JavaScript Syntax
```javascript
context.lineWidth = value;
```
### Property Values
| Value | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| `value` | Number | A positive number representing the width of the line in pixels. | `1.0` |
### Key Characteristics
* **Positive Numbers Only:** The value must be a positive number. Zero (`0`), negative numbers, `NaN`, and `Infinity` are ignored, and the line width retains its previously set value.
* **Coordinate Space Units:** The width is defined in the canvas coordinate space, which means it can be scaled if you apply transformations (like `scale()`) to the canvas context.
---
## Code Examples
### Example 1: Basic Usage (`strokeRect`)
This example demonstrates how to draw a rectangle with a thick border of 10 pixels.
```html
```
### Example 2: Drawing Multiple Lines with Different Widths
You can dynamically change the `lineWidth` property to draw lines of varying thicknesses within the same canvas.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
for (let i = 1; i <= 10; i++) {
ctx.beginPath();
ctx.lineWidth = i; // Line width increases from 1 to 10 pixels
ctx.moveTo(10 + i * 25, 20);
ctx.lineTo(10 + i * 25, 130);
ctx.stroke();
}
```
---
## Technical Considerations & Best Practices
### 1. Line Alignment and the "Half-Pixel" Blur
When drawing a 1-pixel line on a grid, you might notice that the line looks blurry or appears to be 2 pixels wide. This happens because lines are drawn centered over the path coordinate.
* If you draw a line from `(10, 10)` to `(10, 100)` with a `lineWidth` of `1`, the line will span from `x = 9.5` to `x = 10.5`.
* Because screens cannot display half-pixels, the browser antialiases the line, rendering it across 2 pixels with half opacity.
**Solution:** To get crisp, sharp 1-pixel lines, offset your coordinates by `0.5` pixels:
```javascript
// Blurry line
ctx.lineWidth = 1;
ctx.moveTo(10, 10);
ctx.lineTo(10, 100);
ctx.stroke();
// Sharp line
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(20.5, 10);
ctx.lineTo(20.5, 100);
ctx.stroke();
```
### 2. Interaction with `lineCap` and `lineJoin`
The appearance of your line corners and endpoints is highly dependent on how thick your line is. When using a large `lineWidth`, make sure to configure the following properties for a polished look:
* `lineCap`: Controls the appearance of the ends of the lines (`butt`, `round`, or `square`).
* `lineJoin`: Controls the appearance of the corners where two lines meet (`miter`, `round`, or `bevel`).
---
## Browser Compatibility
The `lineWidth` property is universally supported across all modern web browsers:
* Google Chrome
* Mozilla Firefox
* Microsoft Edge / Internet Explorer 9+
* Safari
* Opera
*Note: Internet Explorer 8 and earlier versions do not support the `