Dotted and dashed lines on canvas

Written by Richard, on 5th January 2013

• Introduction
• Browser support
• The setLineDash() method
• The getLineDash() method
• The lineDashOffset property
• Example shapes

Introduction

A recent addition to the canvas specification is the ability to have dotted or dashed lines. They were possible before these additions but achieving them 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 that are shown here demonstrate lines with various dash settings along with a few basic shapes.

Browser support

At the current time (25th July 2013) browser support is limited - Chrome, Safari 6 (Mac), MSIE 11 (reportedly) and Opera 15 all have 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. Safari 6 (on Mac) reportedly has support for dashed lines using these: webkitLineDash and webkitLineDashOffset
2. Internet Explorer 11 has support for dotted and dashed lines (though not it seems the lineDashOffset setting)
3. Opera 15 has support for dotted and dashed lines

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 up 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.

Example shapes

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

<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>

Note There's now also a demo in the RGraph archive (called bar-background-grid-dotted.html) showing you how you can have a dotted or dashed background grid (in Chrome) using this option.