CODEWITHSUNDEEP
javascriptjquerycanvashtml5-canvashtml2canvas
Adrian
Adrian

Reputation: 55

html2canvas text-shadow bug

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

Upvotes: 2

Views: 3904

Answers (2)

M.Abdullah
M.Abdullah

Reputation: 61

//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'
        })
    });
};

Upvotes: 0

markE
markE

Reputation: 105035

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.

Upvotes: 2

Related Questions