html5 pointillés dotted broken lines draw in canvas

heres an example of how to draw dooted broken lines (lignes pointillé) in html5 javascript canvas

  var contextx=0,contexty=0,contextpattern=0;
function context_moveTo(x,y){
  context.moveTo(x,y);
  contextx=x;contexty=y;
}
function context_lineTo(x,y){
  if(contextpattern==0){context.lineTo(x,y);}
  else if(contextpattern==2){
     var dr=20,dx=(x-contextx),dy=(y-contexty),dn=Math.sqrt(dx*dx+dy*dy)/dr;
     for(var i=0;i<dn;i++){context.moveTo(contextx+i*dx/dn,contexty+i*dy/dn);
           context.lineTo(contextx+i*dx/dn+dx*11/(dr*dn),contexty+i*dy/dn+dy*11/(dr*dn));}
     }
  else{
     var dr=10,dx=(x-contextx),dy=(y-contexty),dn=Math.sqrt(dx*dx+dy*dy)/dr;
     for(var i=0;i<dn;i++){context.moveTo(contextx+i*dx/dn,contexty+i*dy/dn);
           context.lineTo(contextx+i*dx/dn+dx*6/(dr*dn),contexty+i*dy/dn+dy*6/(dr*dn));}
     }
contextx=x;contexty=y;
}