Dashed or dotted stroke

[boboz]

Hi,

Would it be possible to have dashed or dotted strokes as a complement to solid line?
Thank you, Bo

[jamietre]

An excellent idea! Unfortunately it's not native to HTML5 canvas so it would take some doing. I did a quick google and someone's written code to mimic this on strokes, but it would be a bit of effort to integrate. I probably don't have time in the near future due to other priorities, but anyone else out there is welcome to take a crack

http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas

[boboz]

Great!

[NKarasek]

The problem with any solution that uses a point to point, straight line drawing algorithm is that the line segments joining coordinates (on a poly, for example) are generally too short to provide space for dashes - single pixel dots perhaps - but not dashes. On a complex area outline, it might be possible (necessary even) to draw curves joining some number of coordinates. This would require drawing the curves for a specific linear distance (defined by the actual distance between sequential coords) and skipping some predefined distance to provide the spaces between dashes. For larger distances between coords, a separate computation would be required to break up a distance > a single dash + space. Egads - the complexity grows. Integrating the solution provided in Jamie's link is not that difficult - but the result would not be a dashed line if simply drawing a dashed line between the "area" coordinates.

The newer html5 spec for canvas provides context.setLineDash([d,s]); which works well for circles and rectangles. It also works well for irregular polygons with sufficient space between coords to allow drawing space for the dashes (and spaces). However, again for complex polygons with coords close together, the problem remains of "not enough space on the line segment to draw a dash". Note that context.setLineDash([d,s]); still is not implemented across all major bowsers. (Chrome, IE, Opera - YES: FF, Safari - NO). This will likely change - soonish, of course.

Update: Good News It seems that dashes are displayed with all the problems of coordinates VERY close together TAKEN CARE OF FOR US :-)) A very complex area with coords almost next to each other STILL displays the dashes at the requested length and spacing.

If you are interested, I have a change to ImageMapster Version: 1.2.10 (2/25/2013) - (the IM js file), which provides the ability to specify dashed or solid strokes, and to provide the dash length and space between dashes. Tested OK in Chrome, IE, and Opera. Not supported in FF or Safari (yet). Two new config options control the stroke: "strokeType : 'dashed | solid'", (default = solid) and "strokeDashes : [l,s]", (default = [5,3]). Let me know if you would like more info.

[techfg]

Hello @boboz -

Thank you for your inquiry, apologies for the delayed reply!

Adding additional styles to the stroke has come up in several issues so I do think its worth exploring.

@NKarasek - You mentioned you have a solution for this, would you be willing to submit a PR?