Html2canvas image capture problem with UTF-8 characters

Question

I want to capture my webpage. For this, I find html2canvas when I use, as shown below, my UTF-8 characters (Persian) get into trouble and this direction is destroyed as you see.

HTML:

<div id="wrapper"> <span>این کاراکتر ها بهم میریزند</span> </div> 

JavaScript:

 $(document).ready(function() { html2canvas($("#wrapper"), { onrendered: function (canvas) { theCanvas = canvas; document.body.appendChild(canvas); canvas.toBlob(function (blob) { saveAs(blob, "Dashboard.png"); }); } }); }); 

WebPage:

Captured website via html2canvas:

you can see the full example here

What is wrong with my implementation?

Answer 1

This is a bug with html2canvas ( Arabic coding with html2canvas ) and can be fixed by setting text-align: left to your shell element.

Here's the updated fiddle http://jsfiddle.net/ydeL72m8/1/