lineDashOffset property

Sets or gets the phase offset of the current line dash pattern. Can be changed to produce "marching ants" animation like marching ants.

This property is read/write.

HTML Canvas 2D Context level 2IE11

Syntax


context.lineDashOffset = offsetInPixels; 
offsetInPixels = context.lineDashOffset;

Property values

Type: number

Offset in pixels to move dash pattern.

Standards information

Remarks

Non-finite values (NaN, infinite) are ignored.

This property can be used to produce "marching ants" line movement as shown in the following example.

Examples

This example shows a simple "marching ants" style borders around three rectangles. The setLineDash method sets up the initial pattern using the dashList array. The dashList array defines two lines, 12 and 3 pixels long, separated by 3 pixels. The lineDashOffset property is incremented and applied to the dashed lines. The offset is reset to 0 when it passes a value of the total of the lines and spaces in the dashList. This lets the pattern to move through a complete sequence before a reset, creating a smooth movement. The Dash list value is set to a negative number for the last rectangle to reverse the animation. See the example in action.


<!DOCTYPE html>
  <html>
  <head>
    <title>Dash line example</title>
  </head>
  <body>
    <canvas id="MyCanvas" width="500" height="400">This browser or document mode doesn't support canvas</canvas> 
    
    <script>

     var dashList = [12, 3, 3, 3];  // Create a dot/dash sequence
     var antOffset = 0;  // Starting offset value

     function draw() {
       var canvas = document.getElementById("MyCanvas");
       if (canvas.getContext) {
         var ctx = canvas.getContext("2d");
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         if (ctx.setLineDash) {
           //  Assign the dashList for the dash sequence
           ctx.setLineDash(dashList);
           //  Get the current offset 
           ctx.lineDashOffset = antOffset;  // To animate the lines
           ctx.lineJoin = "round";
           ctx.lineWidth = "3";
           ctx.strokeStyle = "blue";
           ctx.strokeRect(5, 5, 300, 250);
           ctx.strokeStyle = "red";
           ctx.strokeRect(150, 200, 300, 150);
           ctx.lineDashOffset = -antOffset;  // Reverse animation
           ctx.lineWidth = "7";
           ctx.strokeStyle = "green";
           ctx.strokeRect(250, 50, 150, 250);
         } else {
           ctx.font = "italic 200 36px/2 Unknown Font, sans-serif";
           ctx.fillStyle = "blue";
           ctx.fillText("Dashed lines aren't supported", 10, 100);
         }
       }
     }

     //  Marching Ant code     
     function doAnts() {
       antOffset++;    
       if (antOffset > 20)  // Reset offset after total of dash List values
         {
           antOffset = 0;
         }
       draw();
       setTimeout(doAnts, 10);  //  Set a leisurely march of 10ms               
      }
      doAnts();  //  Start the demo 
  </script>
</body>
</html>


See also

CanvasRenderingContext2D

 

 

Show:
© 2014 Microsoft