html2canvas renders the font family incorrectly if the letter combination is "fi"

Question

I'm trying to generate an image of a div tag using html2canvas library but it's not working. The font does not rendered correctly if the text containing the combination of letter fi.

Please take a look at this screenshot to get the idea:

Please check my Fiddle

I did a lot of research but unable to come up with a solution.

Please help me out.

Thanks in advance.

Answer 1

I managed to fixed it myself by going through this thread. It's a ligatures issue and here's the code to fix it.

var el = document.getElementById('myElement');
el.style.fontFeatureSettings = '"liga" 0';
html2canvas(el, options);

Here's the working Fiddle