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.
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.
A float specifying the amount of the line dash offset. The default value is 0.0
.
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>
js
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();
The line with a dash offset is drawn in red.
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.
js
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 > 5) { offset = 0; } draw(); setTimeout(march, 20); } march();
Specification |
---|
HTML Standard # dom-context-2d-linedashoffset-dev |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
lineDashOffset |
23 | 12 | 277 | 11 | 15 | 7 | 4.4 | 25 | 277 | 14 | 7 | 1.5 |
CanvasRenderingContext2D
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.setLineDash()
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset