An example of HTML5 canvas dotted and dashed lines

Introduction

A recent addition to the HTML5 canvas specification is the ability to have dotted or dashed lines. They were possible before these additions but it involved a lot of code. Now that they can be done by using native properties the amount of code involved is reduced to a line or two and you can have curved dotted or dashed lines too. The examples shown here demonstrate lines with various dash settings along with a few basic shapes.

Browser support

At the current time (5th January 2013) browser support is very limited - only Chrome has support for the official API. Firefox may also have support via the mozDash setting but this is untested. By substituting the setLineDash() function for an empty one though you can allow browsers that don't support dashed lines to carry on regardless - ignoring the setLineDash call:

//Add a placeholder function for browsers that don't have setLineDash()
if (!context.setLineDash) {
    context.setLineDash = function () {}
}

1. Firefox has support for dashed lines using these: mozDash and mozDashOffset (though mozDashOffset does not appear to be scriptable)
2. Safari 6 (on Mac) reportedly has support for dashed lines using these: webkitLineDash and webkitLineDashOffset

The setLineDash() method

context.setLineDash([2,3]);

This function is how you specify the linedash setting. It takes an array of numbers - these numbers specifying the sequence of dash/space/dash/space etc. When finished the sequence repeats itself to the end of the line. Some examples:

• context.setLineDash([5])
  A basic setting that will result in a dashed line where both the dashes and spaces are 5 pixels in size.
  
  
• context.setLineDash([1,2])
  A setting that will result in a dotted line where the dashes are 1 pixel in size and the spaces are 2 pixels.
  
  
• context.setLineDash([2,3])
  Another dashed line but with small dashes.
  
  
• context.setLineDash([5,5,2,2])
  A setting where the first dash is five pixels, then a space of five pixels, then a dash of two pixels, then a space of two pixels, then the sequence starts again.

The getLineDash() method

linedash = context.getLineDash();

The context.getLineDash() method returns the current linedash setting.

The lineDashOffset property

context.lineDashOffset = 2;

This setting can be used to stipulate how far into the line dash sequence drawing commences. So using the [5,5,2,2] setting from above if you set the lineDashOffset to 10 the first dash that is drawn will be two pixels in size, then a space of two pixels then the sequence starts again from the beginning.

By incrementing this setting repeatedly you can get a "marching ants" effect. Click the button to see the effect on the lines above. Keep in mind that when the canvas is redrawn only the lineDash setting is being changed - no positions are being altered.
Make them march!

Example shapes

Here are some more examples of dashed and dotted lines along with the code that produces them:

[No canvas support]

<script>
    // Get the context
    context = document.getElementById("cvs").getContext('2d');
    
    // Anti aliasing fix. This makes the lines look crisp and sharp and means that rounding to the
    // nearest half pixel is not needed. If you don't mind slightly thicker lines you can do without this
    context.translate(0.5, 0.5);
    
    // Draw the circle
    context.beginPath();
        context.setLineDash([5]);
        context.arc(65,65,50,0,2 * Math.PI,false);
    context.stroke();
    
    // Draw the square
    context.beginPath();
        context.setLineDash([5,2]);
        context.rect(130,15,100,100);
    context.stroke();
    
    // Draw the triangle
    context.beginPath();
        context.setLineDash([1,2]);
        context.moveTo(245,115);
        context.lineTo(295,15);
        context.lineTo(345,115);
    context.closePath();
    context.stroke();
    
    // Draw the irregular shape
    context.beginPath();
        context.fillStyle = '#eee';
        context.setLineDash([15]);
        context.moveTo(360,115);
        context.lineTo(375,95);
        context.lineTo(405,15);
        context.lineTo(445,65);
        context.lineTo(445,115);
    context.closePath();
    context.fill();
    context.stroke();
</script>