Drawing Dashed lines on HTML5 Canvas?
Solution 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();
Solution 2
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.
Solution 3
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).
Solution 4
You can use the setLineDash()
method.
context.setLineDash([2,3]);
http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html
Solution 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();
}
![April Lee](https://i.stack.imgur.com/YxJ8Q.jpg?s=256&g=1)
April Lee
Updated on July 09, 2022Comments
-
April Lee almost 2 years
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 use some border feature (dotted, dashed) in CSS to draw dashed lines, but they could only be horizontal or vertical. So I got stuck on this. I also found a library called RGraph and it could draw dashed lines. But using an external library would make the drawing really slow. So does any body has an idea how to implement this? Any help will be appreciated.
-
Sam Dufel over 11 years"using an external library would make the drawing really slow" - what makes you say that?
-
April Lee over 11 yearsMy teammate already tried to use a library to draw those dashed lines. There are about 20 lines on canvas, but makes a huge difference on the performance. When users are interacting with the canvas, you could see quite an obvious delay if you drag the canvas. It takes much longer time to redraw them.
-
Sam Dufel over 11 yearsen.wikipedia.org/wiki/Correlation_does_not_imply_causation - It's more likely the technique that the library used which was causing the delay, rather than the fact that it was packaged into a library.
-
Praveen almost 10 yearspossible duplicate of dotted stroke in <canvas>
-
-
April Lee over 11 yearsHi @markE, thank you so much for showing this solution. However, the lines we need to try are not necessarily straight lines. So I think this solution might not work. But thank you all the same!!
-
lincolnk over 9 yearsdead link, archived version: web.archive.org/web/20140720073758/http://www.rgraph.net/blog/…
-
thenickdude over 8 yearsHere's an API reference on the setLineDash method: developer.mozilla.org/en-US/docs/Web/API/… . Apparently it's supported from IE 11 onwards, and in all other modern browsers
-
tmsppc over 8 yearsFor future readers, javadeveloper's answer below has lower score but doesn't require defining any function - it uses builtin setLineDash() method.
-
Magnus Smith almost 7 yearsI was surprised to see the dash settings lived on longer than I expected, even when destroying/recreating the
ctx
object. To get a solid line pass an empty array tosetLineDash
. -
Ardeus almost 6 yearsHow to you draw online 1 line dash?
-
totymedli almost 3 yearsTo set it back to a solid line just do this:
ctx.setLineDash([])
If you don't want all of your lines to stay dashed you should set it back to solid after you finished the line.