draw dashed line on HTML 5 canvas

Click to see the example

• Javascript source code:

  function drawDashedLine(context, fromX, fromY, toX, toY, dashPattern) {
   
   context.beginPath();
   
   var dx = toX - fromX;
   var dy = toY - fromY;
   var angle = Math.atan2(dy, dx);
   var x = fromX;
   var y = fromY;
   context.moveTo(fromX, fromY);
   var idx = 0;
   var draw = true;
   while (!((dx < 0 ? x <= toX : x >= toX) && (dy < 0 ? y <= toY : y >= toY))) {
    var dashLength = dashPattern[idx++ % dashPattern.length];
    var nx = x + (Math.cos(angle) * dashLength);
    x = dx < 0 ? Math.max(toX, nx) : Math.min(toX, nx);
    var ny = y + (Math.sin(angle) * dashLength);
    y = dy < 0 ? Math.max(toY, ny) : Math.min(toY, ny);
    if (draw) {
     context.lineTo(x, y);
    } else {
     context.moveTo(x, y);
    }
    draw = !draw;
   }
   
   context.closePath();
   context.stroke();
  };
  function drawDashedLineOnCanvas(){
      var canvas = document.getElementById("htmlCanvas");
      var context = canvas.getContext("2d");
      context.strokeStyle="#ff0000";
      context.lineCap = "round";
      context.lineWidth = 1;
      drawDashedLine(context, 0, 0, 0,100,[5,10]);
      drawDashedLine(context, 0, 100, 100,100,[5,10]);
      drawDashedLine(context, 100, 100, 100,0,[5,10]);
      drawDashedLine(context, 100, 0, 0,0,[5,10]);
      drawDashedLine(context, 0, 0, 100,100,[5,10]);
  };
  

• html source code:

  <div style="border: 3px coral solid;" onClick="drawDashedLineOnCanvas();">
  <p>Click to see the example</p>
  <canvas id="htmlCanvas" width="100%" height="300"></canvas>
  </div>
  

See also

• http://168.site90.net/doku.php?id=draw-dashed-lines-on-html-5-canvas