CanvasRenderingContext2D.lineDashOffset

The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or "phase."

Note: Lines are drawn by calling the stroke() method.

Syntax

ctx.lineDashOffset = value;
value
A float specifying the amount of the line dash offset. The default value is 0.0.

Examples

Offsetting a line dash

This example draws two dashed lines. The first has no dash offset. The second has a dash offset of 4.

HTML

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

JavaScript

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

ctx.setLineDash([4, 16]);

// Dashed line with no offset
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Dashed line with offset of 4
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

Result

The line with a dash offset is drawn in red.

Marching ants

The marching ants effect is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border.

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10, 10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.lineDashOffset' in that specification.
Living Standard

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
lineDashOffsetChrome Full support YesEdge Full support 12Firefox Full support 27
Full support 27
Full support 7
Alternate Name
Alternate Name Uses the non-standard name: mozDashOffset
IE Full support 11Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 27
Full support 27
Full support 7
Alternate Name
Alternate Name Uses the non-standard name: mozDashOffset
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support
Full support
Uses a non-standard name.
Uses a non-standard name.

See also