Fun question! I've written a custom implementation of dashed lines; you can try it out here. I took the route of Adobe Illustrator and allow you to specify an array of dash/gap lengths.

For stackoverflow posterity, here's my implementation (slightly altered for s/o line widths):

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;

if (CP && CP.lineTo){

  CP.dashedLine = function(x,y,x2,y2,dashArray){

    if (!dashArray) dashArray=[10,5];

    if (dashLength==0) dashLength = 0.001; // Hack for Safari

    var dashCount = dashArray.length;

    this.moveTo(x, y);

    var dx = (x2-x), dy = (y2-y);

    var slope = dx ? dy/dx : 1e15;

    var distRemaining = Math.sqrt( dx*dx + dy*dy );

    var dashIndex=0, draw=true;

    while (distRemaining>=0.1){

      var dashLength = dashArray[dashIndex++%dashCount];

      if (dashLength > distRemaining) dashLength = distRemaining;

      var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );

      if (dx<0) xStep = -xStep;

      x += xStep

      y += slope*xStep;

      this[draw ? 'lineTo' : 'moveTo'](x,y);

      distRemaining -= dashLength;

      draw = !draw;

    }

  }

}

To draw a line from 20,150 to 170,10 with dashes that are 30px long followed by a gap of 10px, you would use:

myContext.dashedLine(20,150,170,10,[30,10]);

To draw alternating dashes and dots, use (for example):

myContext.lineCap   = 'round';

myContext.lineWidth = 4; // Lines 4px wide, dots of diameter 4

myContext.dashedLine(20,150,170,10,[30,10,0,10]);

The very short dash length of 0 combined with the rounded lineCap results in dots along your line.

If anyone knows of a way to access the current point of a canvas context path, I'd love to know about it, as it would allow me to write this as ctx.dashTo(x,y,dashes) instead of requiring you to re-specify the start point in the method call.