Drawing Dashed lines on HTML5 Canvas?

Question

I would like to draw some dashed lines on HTML5 canvas. But I couldn\'t find there is such a feature. the canvas path could only draw solid lines. And people have tried to u

Answer 1

Drawing dashed lines on canvas

I offer this up not as a complete solution, but as a simple way to draw a dotted line between any 2 points (a line at any angle). It draws very fast.

You can modify it to fit your needs of a dashed line. Drawing dashes should not noticeably slow down the drawing.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/pW4De/

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        DrawDottedLine(300,400,7,7,7,20,"green");

        function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
          var dx=x2-x1;
          var dy=y2-y1;
          var spaceX=dx/(dotCount-1);
          var spaceY=dy/(dotCount-1);
          var newX=x1;
          var newY=y1;
          for (var i=0;i