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

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 3]);/*dashes are 5px and spaces are 3px*/
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

JsFIDDLE

Answer 2

FYI - dotted and dashed lines are part of some new canvas features that are now in the spec - and already implemented in Chrome (and now - Jan 2020 - probably other browsers too).

Answer 3

You can use the setLineDash() method.

context.setLineDash([2,3]);

http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html

Answer 4

This is an easier way to create dashed lines :

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

ctx.setLineDash([5, 15]);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

Hope that helps.

Answer 5

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<dotCount;i++){
                  drawDot(newX,newY,dotRadius,dotColor);
                  newX+=spaceX;
                  newY+=spaceY;              
           }
           drawDot(x1,y1,3,"red");
           drawDot(x2,y2,3,"red");
        }
        function drawDot(x,y,dotRadius,dotColor){
            ctx.beginPath();
            ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
            ctx.fillStyle = dotColor;
            ctx.fill();              
        }