cordovacanvasphonegaptodataurl

Why does Cordova (PhoneGap) return no data from canvas.toDataURL() whereas the same code works outside of Cordova?

I have a test piece of code below that utilizes a SignaturePad JS library.

This code works fine running in a browser (without the cordova references), but within Cordova canvas.toDataURL() returns nothing. I am running PhoneGap desktop to develop and the cordova app is therefore running in the browser (incidentally the same browser that returns the correct output when simply opening the html file directly, without phonegap/cordova).

<html>
  <head>
    <meta charset="utf-8" />
    <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"
    />
  </head>

  <body>
    <div class="app">
      <canvas class="test-canvas"></canvas>
      <button class="test-btn">Log DataURL</button>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
      type="text/javascript"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

    <script type="text/javascript">
      app.initialize();
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {
        $(document).ready(function() {
          var canv = $(".test-canvas");
          canv.css({ border: "1px solid black" });
          var sigPad = new SignaturePad(canv[0]);

          $(".test-btn").click(function() {
            console.log(canv[0].toDataURL());
          });
        });
      }
    </script>
  </body>
</html>

Example output after signing in the box in the browser: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Output in cordova: ``

I have read about some people struggling with toDataURL() in Cordova, but they saeem to be to do with CORS policies etc, but I do not receive any errors when using the code, and am not accessing external images etc.

Solution

  • I found my error. It was not a problem with Cordova at all. It is because I was using Brave Broswer (Privacy browser based on Chrome) as my dev browser. It appears something within Brave is (silently...sigh) preventing canvas.toDataURL() from accessing the data from the canvas. Chrome and Firefox work fine.