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
Specification |
---|
HTML Standard # dom-context-2d-getlinedash-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.setLineDash()
CanvasRenderingContext2D.lineDashOffset