border:dashed renders as solid

[TryAgainLater]

I'm using version 0.4 and all dashed borders are rendered as solid.

Tried your border test case (https://github.com/niklasvh/html2canvas/blob/master/tests/cases/border/dashed.html) and got the same result.

Tested in latest versions of FF/Chrome/Opera/IE.

[TryAgainLater]

I have written email to you about this issue. Please answer as soon as possible.

[brcontainer]

I reviewed and it really seems that there is nothing in the source code of the html2canvas about borderStyle (I could be wrong)

[navotgil]

Awesome lib!
Got the same problem as well.
Not sure if it's a feature or a bug
Thanks

[marquezmanu]

I have the same problem...

Anyone have a solution??

[Zaccheo]

I Got the same problem.
<div class="pd10" style="border:4px dashed #B9BFD1;">
dashed convert to solid style. Please.

[lgellert]

Same problem here.

[brcontainer]

Maybe this link helps to create a pullrequest http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html

[Rodris]

Solved by drawing the borders myself, over the canvas returned by html2canvas.

Here are the steps:

1. Collect all border data in the HTML;
2. Remove the borders from the HTML, so the html2canvas wont draw them;
3. Call the html2canvas;
4. In the onrendered callback, draw the borders and restore the borders in the HTML.

Here is a fiddle.

[eKoopmans]

Nice @Rodris! Looks like a good solution as long as the borders are straight/rectangular.

I dug into the source code and worked out a way to fix things internally, see #1146. This works with non-rectangular borders as well (border-radius)! I haven't done too much testing but hopefully it solves the issue. You can grab a version of html2canvas with that merged in here.

[agrawroh]

@eKoopmans Thanks for the fix! It works great for the dashed borders but now my images seems a bit chopped from the bottom. Is there a way to fix this?

[eKoopmans]

Can you give me an example?

[sadanandkenganal]

Hi @eKoopmans ,

Still border-radius is not working with latest release of html2canavs. I am using html2canvs in react app. Is there support for border-radious latest version ? Can you please suggest fix for this ?

[animesh84]

same problem here "boder: 2px dashed #9b9b9b" converted into solid. did any one got answer?

[eKoopmans]

Hi, sorry the changes I spoke of in 2017 weren't merged. It would take someone reworking #1146 to work with the latest version of html2canvas.

[jasperplender]

Hi guys,

This is a dirty fix but I used this and it worked for me:

.whateveryouwant:before {
content: "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _";
letter-spacing: 4px;
}

[animesh84]

Thanks for your help. I will implement it.

…

On Wed 27 Mar, 2019, 7:34 PM jasperplender ***@***.*** wrote: Hi guys, This is a dirty fix but I used this and it worked for me: .whateveryouwant:before { content: "_ _ _ _ _ _ _ _ _ _ _ _ _ _ _"; letter-spacing: 4px; } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#210 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AkTdvDqkUikC4P7QJ1PKcsfYYH_Tcbbsks5va3pRgaJpZM4Ap8aN> .

[bUbUsHeD]

I have experienced a more severe version of this problem with none of the above solutions working.

In the end I solved the issue by simply making a div full of dashes and cycling through a lot of fonts until I found a font for which the dashes would be rendered.

[johnray016]

I encountered the same problem.

it took me a while to solve it, instead of using dashed border, I remove the border of the div. Then I add polyline SVG and act as a border. Then it fix my problem

[nguyenminhtien1411]

I encountered the same problem.

it took me a while to solve it, instead of using dashed border, I remove the border of the div. Then I add polyline SVG and act as a border. Then it fix my problem

@johnray016 Nice it works. Thank you!