Drawing Dashed lines on HTML5 Canvas?

html canvas line
April Lee picture April Lee · Mar 13, 2013 · Viewed 47.8k times · Source

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.

Answer

Jignesh Variya picture Jignesh Variya · Apr 12, 2013 
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

Related questions

HTML5 canvas ctx.fillText won't do line breaks?

I can't seem to be able to add text to a canvas if the text includes "\n". I mean, the line breaks do not show/work. ctxPaint.fillText("s ome \n \\n <br/> thing", x, y); The above …

Read More
clear line on HTML5 Canvas

Is there a way to unstroke a line? On my canvas I have a line with opacity 0.5, and width of 20 pixels, let's say. Now I want to to make it longer, means to draw another line right out of the …

Read More
How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More