Add support for dotted/dashed border styles

[eKoopmans]

Feature: Dotted/dashed border styles

Until now, dotted/dashed borders were rendered as solid borders. This should now render them correctly.

Implementation

The default border-rendering is left untouched: it is rendered as a shape and filled with a solid color.

However, when a border is detected as 'dotted' or 'dashed', rendering now switches to a path-based approach, which draws the path of the border and applies the appropriate style using ctx.setLineDash().

Thanks to @Rodris in #210 for getting things started.

Related issues/pull requests

#96, #210, #366, #413, #414, #589, #984, #1036, #1117

[eKoopmans]

For anyone looking for a version of html2canvas with this pull request merged in, feel free to grab a copy at this fork (it also has my other recent pull requests merged).

[eKoopmans]

Not yet merged - looking at the new build, this approach could still be plugged into renderBorder. The particulars of how I implemented this aren't very pretty (mostly because of my limited understanding of curvePoints, etc), but the idea is to create a path instead of drawing a shape, then ctx.stroke() it with the appropriate ctx.strokeStyle.

[thedeany]

Any chance of this being merged any time soon?

[gamesover]

any progress for this MR?

[chaosJS]

border dashed style still rendered as solid version 1.0.0-rc.3 @niklasvh

[LeiFu88]

Any update for this PR?

[codefactor]

@niklasvh ,

Looks like this PR might be solving an issue, where in my case we use dashed/dotted borders to draw lines in a chart. We are getting a customer issue where they complain these dashed lines in the chart are coming as solid lines.

I haven't tested this myself - but if this PR works, then we are considering using the fix in this PR, but it would be great if this were merged and part of an official new production release of html2canvas

I wonder what is the hold-up, I understand that this issue might not be a priority, but I would like to get a sense of how stable this fix is before I recommend my team to pick up this change and use it in production.

[thedeany]

@niklasvh Any thoughts or updates on getting this merged?

[locvnhub]

Please fix this issue.

[niklasvh]

Support for other border styles was added in #2531

[codefactor]

@niklasvh awesome to see updates on this old ticket!