lineDashOffset

Summary

Specifies the number of pixels to offset the dash pattern.

Property of apis/canvas/CanvasRenderingContext2D apis/canvas/CanvasRenderingContext2D

Syntax

var result = CanvasRenderingContext2D.lineDashOffset;
CanvasRenderingContext2D.lineDashOffset = value;

Return Value

Returns an object of type NumberNumber

Default is 0.

Examples

This example sets line dash parameters and draws a dashed line across the canvas, using an offset of 3px. The effect of the offset is difficult to see without comparing to the un-offset version. lineDashOffset is often used to achieve simple animation, as in the so-called “marching ants” line effect.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
. . .
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
ctxt.setLineDash([10, 15]);
ctxt.beginPath();
ctxt.lineDashOffset = 3;
ctxt.moveTo(0,75);
ctxt.lineTo(300, 75);
ctxt.stroke();
</script>

Related specifications

W3C HTML Canvas 2D Context: W3C Candidate Recommendation

Attributions

Microsoft Developer Network: Windows Internet Explorer API reference Article