text-decoration underline is misplaced

[FDIM]

Bug reports:

http://jsfiddle.net/8rjbyqgj/

As you can see in jsfiddle, links that have a text-decoration: underline rule renders with a line above it

Specifications:

• html2canvas version tested with: 1.0.0-alpha-8
• Browser & version: chrome 63 & IE 11
• Operating system: Windows 7

[niklasvh]

Related: #1292

[FDIM]

So I've looked at the values before rectangle / line is rendered and if I set baseline to 0, it renders correctly (or close enough).

html2canvas/src/renderer/CanvasRenderer.js

Line 253 in b7c7464

Math.round(text.bounds.top + text.bounds.height - baseline),

I am not certain about the details, but could the fix be Math.round(text.bounds.top + baseline) ? It renders the line in correct position for me.
FYI: bounds.height was 19 and baseline value was 17 in my case, thus it make sense why it appears in the top

[eKoopmans]

Hey @FDIM, thanks for finding the problem, you're right that 0c8d38d ended up causing the very error it was meant to fix. I explained a bit more here.

[edguz2408]

I recently started using the last version of HTML2Canvas which should include the fix described above, however I kept getting a misplaced underline when I used text-decoration: underline just like it's mentioned at the beginning of this thread, I managed to fix the issue by modifying Math.round(text.bounds.top + text.bounds.height - baseline) to Math.round(text.bounds.top + text.bounds.height) in CanvasRenderer.js file, hope it helps anyone who's still having this issue.