Important: The RGraph website has recently experienced some downtime. It's now back up and available once more but keep this in mind as you may experience errors or oddities when browsing the site.

An example of dotted and dashed lines

Warning: The features described on this page are new and may be prone to change

Introduction

[No canvas support]

A recent addition to the 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 (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 () {}
}
Your browser:


Chrome:
YES
Firefox:
NO1
Safari:
NO2
Internet Explorer:
YES3
Opera:
YES4
  1. Firefox has some limited support for dotted and dashed lines through the mozDash setting. Dash offsetting is not available
  2. Safari 6 (on Mac) reportedly has support for dashed lines using these: webkitLineDash and webkitLineDashOffset
  3. Internet Explorer 11 has support for dotted and dashed lines (though not it seems the lineDashOffset setting)
  4. 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 to the end of the line. Some examples:

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.

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>

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