Web/API/CanvasRenderingContext2D/setLineDash

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

ctx.setLineDash(segments);

Parameters

segments

An Array of 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

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();

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.

function drawDashedLine(pattern) {
  ctx.beginPath();
  ctx.setLineDash(pattern);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y += 20;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let y = 15;

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]

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'CanvasRenderingContext2D.setLineDash' in that specification.	Living Standard

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
setLineDash	Chrome Full support 23	Edge Full support 12	Firefox Full support 27	IE Full support 11	Opera Full support 15	Safari Full support 6.1	WebView Android Full support ≤37	Chrome Android Full support 25	Firefox Android Full support 27	Opera Android Full support 14	Safari iOS Full support 7	Samsung Internet Android Full support 1.5

Legend

Full support  

Full support

See also

• The interface defining this method: CanvasRenderingContext2D
• CanvasRenderingContext2D.getLineDash()
• CanvasRenderingContext2D.lineDashOffset

CanvasRenderingContext2D.setLineDash() by Mozilla Contributors is licensed under CC-BY-SA 2.5.