javascript html cordova canvas phonegap-plugins

Error sharing base64 image on SocialShare plugin

I'm testing the base64 image sharing of the Social Share Plugin(Git Repo) and I'm having some troubles while doing it. I have the code below to create a canvas from a string and create a data url from the canvas and it works fine, the problem is when I try to share the created base64 using the plugin the images goes all black. But if I try any other random base64, like the one on the baseTest variable, It works fine. I'd appreciate any help with this. Thanks in advance.

            function socialShare() {
                var canvas = document.getElementById("receipt");
                var context = canvas.getContext("2d");

                const messages = [
                  "################################",
                  "Central Jogos",
                  "################################",
                  "Apostador: test",
                  "Valor apostado: R$ 5,00",
                  "Valor de retorno: R$ 6,15",
                  "Data da aposta: 19/02/2017 15:07",
                  "Quantidade de jogos: 1",
                  "--------------------------------",
                  "Vasco X Flamengo",
                  "Empate: 1.23",
                  "10/03/2017 15:30",
                  "================================",
                  "Cambista: Cambista Teste",
                  "Telefone: (82) 9977-8877"
                ];

                context.font = "12px Courier new";

                y = 12;
                for (var i in messages)
                {
                  context.fillText(messages[i], 0, y);
                  y += 18;
                }
                
                /*var baseTest = "data:image/png;base64,R0lGODlhZgAZALMAAAAAABgYGCEhISkpKSkxQjk5QkZGTnF7i2uEvXOEvXeMvX+UxqSx0MfS5dPe7Nbn7ywAAAAAZgAZAAAE/hDJSau9OOvNu/9gKI5kaZ5oOjlOxmpK82qzal+1lVvyrre3IMX38g2BRklSiCK2lojZEsosOaNAjDT7sxgI4LB4TC6HDacpt8vxEQDwuHxOr8cJ6fWRpsfp33aBgndKLQsyDAiHDomLLA0LWAuLiUWGPQ6QWCycipiaL5QIgAABDJwMAgACpyypACwABacGAAanB3hYMry8L5iPm5wNWMXAmcKdx8SPnC2kragA0a6wjNcMp6cNuqgJ3pYrT5kMC+HhhenFNZaZ5s9xsXCx8tbWDgf3+SzdDpGS6diNE7duoLotAAv+e0GqHj0H8SCyGDDPAUVr/QgGzIKuYEFntEhCKnqkQGOxhhDnOJSY0l7FjOo8biR4DiSxYjhjsFjIEV5FOitdCuUXUyBOmR477jmKoFWlnqMiAm35UOrLolCNah1oBOEMBR0ZWrUXNOjVo1tpAnmXFCrOsAZPjq360yxGrASXJWPk8ZhIYzbRPotFjdE0kAyGUnUAU7CnYZEQJ/DoiNzBS5AdE4jFCpWqzq5U2SVapfQEUoNSz9FluvQBA7Bjy55Nu3bsA61z697Nm0QEAAA7";*/

                
                console.log(context.canvas.toDataURL());
                var base64 = context.canvas.toDataURL();

                alert(base64);

                /*window.plugins.socialsharing.share(
                    null, 
                    'Receipt', 
                    base64, 
                    null
                );*/
            }

<!DOCTYPE html>

<html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
    </head>
    <body>

        <button onclick="socialShare()">Testar</button>

        <canvas id="receipt" width="230" height="270"></canvas>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Solution

The image is somehow getting converted to jpeg, I guess. TRY either, drawing a white background before drawing the text or specifying the MIME Type explicitly.

function socialShare() {
    var canvas = document.getElementById("receipt");
    var context = canvas.getContext("2d");
  
    const messages = [
                  "################################",
                  "Central Jogos",
                  "################################",
                  "Apostador: test",
                  "Valor apostado: R$ 5,00",
                  "Valor de retorno: R$ 6,15",
                  "Data da aposta: 19/02/2017 15:07",
                  "Quantidade de jogos: 1",
                  "--------------------------------",
                  "Vasco X Flamengo",
                  "Empate: 1.23",
                  "10/03/2017 15:30",
                  "================================",
                  "Cambista: Cambista Teste",
                  "Telefone: (82) 9977-8877"
                ];
  
    // draw a white background
    context.fillStyle = "#fff";
    context.fillRect(0, 0, canvas.width, canvas.height);
  
    // draw text
    context.font = "12px Courier new";
    context.fillStyle = "#000";
    y = 12;
    messages.forEach(function(e) {
        context.fillText(e, 0, y);
        y += 18;
    });
  
    var base64 = canvas.toDataURL();
    // or specify the MIME Type explicitly
    // var base64 = canvas.toDataURL("image/png");
  
    console.log(base64);
}

<button onclick="socialShare()">Testar</button>
<canvas id="receipt" width="230" height="270"></canvas>