I have a very strange problem with HTML2Canvas. It does not render the letter i if the i follows f in chrome and it capitalises the f. There is no issue in Firefox.

enter image description here

I don't want to change the font, it's an embedded font (Ubuntu), maybe that's the issue?

<script type="text/javascript">
var $loading = $('#loader').hide();
$('#carddownload').on('click', function() {
.ajaxStart(function () {
.ajaxStop(function () {
function showimage(){
html2canvas([document.getElementById('card')], {
onrendered: function(canvas)
var name = $(".tcgnamecell").html();
var n = name.indexOf("<br>");
var data = {};
data['name'] = name.substr(0); 
data['img'] = canvas.toDataURL();
var n = data['name'].indexOf("<br>");

$.post("save.php", {image: data}, function (file) {
window.location.href ="download.php?path=" + file;

1 Answers 11

Certain fonts do not render correctly in HTML2Canvas, irrespective of whether you use google fonts or an embedded font. I used a different font. blue highway rg.ttf is similar to Ubuntu.

Not the answer you're looking for? Browse other questions tagged or ask your own question.