html2canvas conflicts with bootstrap

Question

If I use html2canvas 0.4.1. The word spacing is ok. But no new line break in textarea. As shown in: https://jsfiddle.net/mdj4epr2/5/

If I use html2canvas 0.5.0 any version. The word spacing is ok. New line break in textarea is ok. As shown in https://jsfiddle.net/mdj4epr2/8/

But after added bootstrap css to html2canvas 0.5.0, the word spacing is wrong. https://jsfiddle.net/mdj4epr2/9/

Main rendering code is very simple:

html2canvas(main_content, {
    onrendered: function(canvas) {
       canvas_div.appendChild(canvas);
    }
});

Any suggestions?

Answer 1

i think the problem is html2canvas couldn't get font-family "Helvetica Neue" from bootstrap and set the font-family to none.

i can fix this by forcing the element to use font-family without "Helvetica Neue" but still looks good.

<div id="main_content" style="font-family: Helvetica,Arial,sans-serif">
</div>

or you can simply set the font-family and change it back after running html2canvas like this https://jsfiddle.net/mdj4epr2/11/