CanvasRenderingContext2D.getLineDash

The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.

Syntax

ctx.getLineDash();

Return value

An Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number, when setting the elements, is odd, the elements of the array get copied and concatenated. For example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25].

Examples

Getting the current line dash setting

This example demonstrates the getLineDash() method.

HTML

<canvas id="canvas"></canvas>

JavaScript

As set by setLineDash(), strokes consist of lines that are 10 units wide, with spaces of 20 units in between each line.

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

ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash());  // [10, 20]

// Draw a dashed line
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Gecko-specific notes

• Starting with Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), the non-standard and deprecated property mozDash has been implemented to set and get a dash list. This property will be deprecated and removed in the future, see bug 931389. Use getLineDash() instead.

WebKit-specific notes

• In WebKit-based browsers (e.g., Safari), the non-standard and deprecated property webkitLineDash is implemented besides this method. Use getLineDash() instead.

See also

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