lineDashOffset of dashed line on Canvas

offset with line length and gap for a dashed line

Read setLineDash

gctx.lineDashOffset = value;
lineDashOffset takes numeric value. We can set any value but practically the maximum offset is equal to sum of line length and line gap.

Example :
Line width = 5 ; Line gap =5
Now offset can have value 0, that is no offset or it can have any other value. If offset is set as 11 then it is same as offset value of 1. Similarly offset value of 13 is same as offset with value 3. Try the demo below



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();


plus2net.com




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-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer