setLineDash to draw dashed line with specified pattern on a Canvas in html

offset with line length and gap for a dashed line

gctx.setLineDash = segment_array[];

segment_arra[] takes values showing line length and gap between dash.

Example
[4,5] : Line length 4 and gap between two segment of line is 5. This pattern will continue for the full length of the line.
[4,5,7] : This is same as [4,5,7,4,5,7,4,5,7 ...].
[] : If the array is empty then dash line is cleared and solid line state is returned

Drag the sliders to change offset , line length and line gap values.

void gctx.lineTo(x, y);

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
gctx.beginPath()
gctx.setLineDash([5,5]);
gctx.lineDashOffset = 5;
gctx.moveTo(0, 100);
gctx.lineTo(400, 100);
gctx.stroke();

Marching Ants Effect

Marching ants effect is a animation used to select an area on graphics. This effect is created by changing the border to dashed line and varying the offset. This gives an impression that the borders are moving. We can use lineDashOffset to create such effects.

setLineDash to draw dashed line on Canvas

Marching Ants Effect

Subscribe