CanvasRenderingContext2D: setLineDash() method
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 setLineDash() method of the Canvas 2D API's
CanvasRenderingContext2D interface sets the line dash pattern used when
stroking lines. It uses an array of values that specify alternating lengths of lines
and gaps which describe the pattern.
Note: To return to using solid lines, set the line dash list to an empty array.
Syntax
setLineDash(segments)
Parameters
segments-
An
Arrayof numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example,[5, 15, 25]will become[5, 15, 25, 5, 15, 25]. If the array is empty, the line dash list is cleared and line strokes return to being solid.
Return value
None (undefined).
Examples
Basic example
This example uses the setLineDash() method to draw a dashed line above a
solid line.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Dashed line
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();
// Solid line
ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();
Result
Some common patterns
This example illustrates a variety of common line dash patterns.
HTML
<canvas id="canvas"></canvas>
JavaScript
The drawDashedLine() function created below makes the drawing of multiple
dashed lines simple. It receives a pattern array as its only parameter.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let y = 15;
function drawDashedLine(pattern) {
ctx.beginPath();
ctx.setLineDash(pattern);
ctx.moveTo(0, y);
ctx.lineTo(300, y);
ctx.stroke();
y += 20;
}
drawDashedLine([]);
drawDashedLine([1, 1]);
drawDashedLine([10, 10]);
drawDashedLine([20, 5]);
drawDashedLine([15, 3, 3, 3]);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]
Result
Specifications
| Specification |
|---|
| HTML # dom-context-2d-setlinedash-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setLineDash
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D CanvasRenderingContext2D.getLineDash()CanvasRenderingContext2D.lineDashOffset