Screenshot plugin returns black image when page has any canvas


I’m working on a project and i need to take a Screenshot of a page with some charts (Chart.js) on it and i need to share that screenshot on social medias. When i take a screenshot in a page without canvas everything is ok, but when a canvas is in the page i get a black image. Is there other way to take a screen shot? How can i solve that?

This is my html code for canvas

    <canvas id="lineChartLibres" #lineChartLibres></canvas>

This is my ts file with the screenshot function and canvas binding with charts

    this.platform.ready().then(() => {
           .then((res) => {
               this.socialSharing.share("Compartiendo mis estadisticas",null, res , null)
                 .then(() => {},
                   () => {
                     alert('SocialSharing Error');
             () => {
               alert('Screenshot Error');

@ViewChild('lineChartLibres') public lineChartLibres: any;

  this.lineChartLibres = new Chart(this.lineChartLibres.nativeElement, {
            type: 'line',
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7 ],
                datasets: [
                        label: "Porcentaje tiros libres",
                        fill: false,
                        lineTension: 0.3,
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderColor: "rgba(75,192,192,1)",
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: "rgba(75,192,192,1)",
                        pointBackgroundColor: "#fff",
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(75,192,192,1)",
                        pointHoverBorderColor: "rgba(220,220,220,1)",
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: this.dataLibres,
                    }, options: {
                         scales: {
                           yAxes: [{
                              ticks: {
                                 suggestedMin: 0,
                                 suggestedMax: 100


Just to make sure:
Can you take a screenshot of the canvas element using the native OS screenshot functionality?

is I assume?


Yes, i can take a screenshot, but when there is a canvas element i get a black screen too. I saw that some people reported the same issue at the plugin repo ( but there’s not a solution yet


I am not sure if you read and understood my question:
Is it also black when you do a screenshot not with the plugin but manually, with the normal OS functionality of pressing some buttons in the correct order?


oh! Sorry! I´m from Argentina and my english is kind of bad. If i took the screenshot manually i get the image of the screen whitout problems, it isn’t black.


Ok, so it is not a general problem but something with the Cordova plugin :confused:

How about this workaround?