Screenshot using html2canvas in salesforce lightning

Question

I have created salesforce lightning application to take screenshot using javascript(html2canvas.js), but it will give me only background color not text.

Apllication:

<aura:application >
<!-- Js Script -->
<ltng:require scripts="{!$Resource.jqueryLatest + '/jquery-3.1.1.js'}" />
<ltng:require scripts="{!$Resource.CommunityResource + '/js/html2canvas.js'}" />
<ltng:require scripts="{!$Resource.CommunityResource + '/js/jquery.plugin.html2canvas.js'}" />

<div id="captureDiv"></div>
<div id="target">
    <p style="background:red; padding:10px; color:#fff; width:50%;" >
        Hi this is test app of print screen
    </p>
</div>
<button onclick="{!c.myAction}">Print Screen</button>

Application Controller :

({
myAction : function(component, event, helper) {
    debugger;
    $('<p>Screensort</p><div id="screenshotcanvas"><canvas id="my_canvas_id" width="270" height="350"></canvas></div>').insertBefore($('#target'));
    html2canvas(document.getElementById('target'),{ 
        onrendered: function (canvas) {
            //show image
            var myCanvas = document.getElementById('my_canvas_id');
            var ctx = myCanvas.getContext('2d');
            var img = new Image;
            img.onload = function(){
                ctx.drawImage(img,0,0,270,350); // Or at whatever offset you like
            };
            console.log('img >> ', canvas.toDataURL());
            img.src = canvas.toDataURL();
        }
    });
}

})

Output :

Answer 1

Try to remove the < p >< /p > ,and put the text direcly inside the div and it will work.