setLineDash to draw dashed line on Canvas

offset with line length and gap for a dashed line

Read lineDashOffset

gctx.setLineDash = segment_array[];
segment_arra[] takes values showing line length and gap between dash.

[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.lineDashOffset = 5;
gctx.moveTo(0, 100);
gctx.lineTo(400, 100);

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.


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer