Canvas How to - Draw dashed line

Question

We would like to know how to draw dashed line.
Answer


<!--from  w ww.jav  a  2s . c  o  m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    var can = document.getElementById('canvas1');
    var ctx = can.getContext('2d');
    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 = dy/dx;
        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;
        }
      }
    }
    ctx.beginPath();
    ctx.dashedLine(10,10, 100, 100,[4, 4])
    ctx.stroke();
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas1" width="400" height="400"></canvas>
</body>
</html>
The code above is rendered as follows: