html2canvas text-shadow bug

Question

i have this code http://jsfiddle.net/nuu7B/2/

html2canvas($('#preview'), {  
    onrendered: function (canvas) {
        var canvasImg = canvas.toDataURL("image/jpg");
        $('#canvasImg').html('<img src="'+canvasImg+'" alt="">');
    }
});

and i'm using html2canvas to export image. But as you can see, the text-shadow it's not working as it should.

text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;

i know canvas support text-shadow but the html2canvas is the problem here..

How can I fix that? thanks

Answer 1

html2canvas has only basic text-shadow support:

// Not supported: text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;

// Just the basic X-offset, Y-offset, blur, color

text-shadow: 1px 2px 3px #555;

Some options:

• Submit a pull request here: https://github.com/niklasvh/html2canvas/pulls

• Position a CSS shadow styled html element over the canvas where you need it

• Experiment drawing multiple abutting shadows on html canvas to see if you can create what you need.

Answer 2

//This function will select each and every svg text and will apply the css

function styleToSVGText  () {
    var SVGTextArr = $('svg text');
    SVGTextArr.each(function (i, item) {
        $(item).css({
            'text-rendering': 'optimizeLegibility',
            'font-family': 'sans-serif',
            'text-shadow': 'transparent'
        })
    });
};