También podemos dibujar líneas discontinuas en <canvas> utilizando el método  setLineDash().
 JavaScriptDescripciónDefecto
beginPath()context.beginPath();Empezamos a dibujar 
lineWidthcontext.lineWidth=numero;Determina (sets) o devuelve (returns) la grosor de la línea.1
strokeStylecontext.strokeStyle=color|gradient|pattern;Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea.negro
moveTo()context.moveTo(x,y);Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea.x=0;
y=0;
lineTo()context.lineTo(x,y);Define una línea desde un punto especificado anteriormente hasta otro punto especificado por sus coordenadas "x" e "y". Mueve el "lapiz" a este punto. 
stroke()context.stroke();Dibuja una línea ya definida. ¡OJO! Sin stroke() no hay línea. 
setLineDash()context.setLineDash();Método que se utiliza para crear líneas discontinuas. 
getLineDash();context.getLineDash();Propiedad que especifica el desplazamiento (offset) inicial de una línea discontinua. 
lineDashOffsetcontext.lineDashOffset;Método que devuelve la lista de valores utilizada para crear una línea discontinua. Ejemplo: console.log(context.getLineDash()); 
Vea la chuletastar con las propiedades y metodos() de canvas.

El método setLineDash()

Podemos dibujar líneas discontinuas en <canvas> utilizando el método  setLineDash(), que toma como argumento una lista de números separados por comas, que definen el patrón a seguir.
Por ejemplo ctx.setLineDash([10, 5]) define una línea compuesta por fragmentos de línea de 10px separados por espacios de 5px.
Para desactivar las líneas discontinuas podemos utilizar ctx.setLineDash([]), como en el siguiente ejemplo, o podemos utilizar los métodos save() y restore()star para aislar la parte de código que establece el patrón de líneas discontinuas.
Vea algunos ejemplos:
<canvas id="c" width="250" height="200">Su navegador no soporta canvas :( </canvas>
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 300;
var ch = c.height = 175;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.strokeStyle = "red";
ctx.lineWidth = 3;

ctx.setLineDash([4, 14]);
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();

ctx.setLineDash([4, 14, 18]);
ctx.beginPath();
ctx.moveTo(50, 75);
ctx.lineTo(250, 75);
ctx.stroke();

ctx.setLineDash([4, 14, 2, 16]);
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();

ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(50, 125);
ctx.lineTo(250, 125);
ctx.stroke();

La propiedad lineDashOffset

Una propiedad relacionada es ctx.lineDashOffset, que especifica el desplazamiento ( offset ) inicial como en el siguiente ejemplo:
<canvas id="c1" width="250" height="200">Su navegador no soporta canvas :( </canvas>
var c1 = document.getElementById("c1");
var ctx1 = c1.getContext("2d");
var cw = c1.width = 300;
var ch = c1.height = 200;
var cx = cw / 2,
  cy = ch / 2;

ctx1.strokeStyle = "red"

ctx1.setLineDash([14, 4]);

ctx1.lineDashOffset = 0;
ctx1.beginPath();
ctx1.moveTo(0, cy - 10);
ctx1.lineTo(cw, cy - 10);
ctx1.stroke();

ctx1.lineDashOffset = 9;
ctx1.beginPath();
ctx1.moveTo(0, cy + 10);
ctx1.lineTo(cw, cy + 10);
ctx1.stroke();
Las dos líneas son iguales, solo que la segunda tiene un desplazamiento ctx.lineDashOffset = 9;

Hormigas andadoras

Podemos utilizar la propiedad ctx.lineDashOffset para realizar animaciones de tipo "hormigas que marchan" ( marching ants )
<canvas id="canvas" width="250" height="200">Su navegador no soporta canvas :( </canvas>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cw = canvas.width = 300;
var ch = canvas.height = 200;
var cx = cw / 2,
  cy = ch / 2;

context.strokeStyle = "red"

var offset = 0;

function dibujarRectangulo() {
  context.clearRect(0, 0, cw, ch);
  context.setLineDash([4, 4]);
  context.lineDashOffset = -offset;
  context.strokeRect(cx - 50, cy - 50, 100, 100);
}

function Animacion() {
  offset += .5;
  if (offset > 8) {
    offset = 0;
  }
  dibujarRectangulo();
  requestId = window.requestAnimationFrame(Animacion);
}

requestId = window.requestAnimationFrame(Animacion);
Lea más acerca de requestAnimationFramestar