CanvasRenderingContext2D: getLineDash() method

None.

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].

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

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