Dotted and dashed lines on canvas
Written by Richard, on 5th January 2013Summary: A description and example of native dotted and dashed lines on the canvas tag. This article was originally written in 2013 and was resurrected (after being removed from the site) in 2020.
- 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 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 () {}
}
- Safari 6 (on Mac) reportedly has support for dashed lines using these:
webkitLineDash
andwebkitLineDashOffset
- Internet Explorer 11 has support for dotted and dashed lines (though not it seems the
lineDashOffset
setting) - 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 demos/bar-background-grid-dotted.html
) showing you how you can have a dotted or dashed background grid
(in Chrome) using this option.