Resizing canvas causes ionic app on emulator to freeze

@mhunt wrote:

I am trying to create an ionic app that allows the user to sign their name on a canvas. I use signature-pad.js https://github.com/szimek/signature_pad to create the signature.

When I run the app on the browser it works flawlessly.

However when I run the app on the android emulator the app freezes when I navigate to the signature page.

Here is the controller code for the signature page:

(function() {
angular.module('ValShip').controller('signatureCtrl', signatureCtrl);

signatureCtrl.$inject = ['$cordovaFileTransfer','$state', '$stateParams','$ionicPopup', '$log'];

function signatureCtrl($cordovaFileTransfer,$state, $stateParams, $ionicPopup, $log) {

    var vm = this;

    var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

    window.onresize = resizeCanvas;
    resizeCanvas();

    signaturePad = new SignaturePad(canvas);

    clearButton.addEventListener("click", function (event) {
        signaturePad.clear();
    });

    saveButton.addEventListener("click", function (event) {

        if (signaturePad.isEmpty()) {

            // notify the user that the signature is empty
            $ionicPopup.alert({
                title: 'Signature pad is empty.',
                template: 'Please provide signature first.'
            });

        } else {
            $log.debug('TODO: Send png.');


            // Destination URL
            var url = "http://foo/upload/upload.php";

             //File for Upload
             var targetPath = signaturePad.toDataURL("image/png", 1.0);

             // File name only
             var filename = ""+$stateParams.id +".png";

             var options = {
              fileKey: "file",
              fileName: filename,
              chunkedMode: false,
              mimeType: "image/png",
              params : {'directory':'upload', 'fileName':filename}
          };

          $cordovaFileTransfer.upload(url, targetPath, options).then(function (result) {
              $log.debug("SUCCESS: " + JSON.stringify(result.response));
          }, function (err) {
              $log.debug("ERROR: " + JSON.stringify(err));
          }, function (progress) {
                  // PROGRESS HANDLING GOES HERE
              });


          signaturePad.clear();

            // notify the user that the signature is empty
            $ionicPopup.alert({
                title: 'Success!',
                template: 'Signature saved.'
            });

            $state.go("app.master-bill", {id: $stateParams.id});
        }
    });

    //PROBLEM IS SOMEWHERE IN HERE!!!!
    function resizeCanvas(){
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

};
})();

Please note I know that the problem lies with the resizeCanvas() function because if I remove it the app does not freeze but the drawing of the signature is skewed so I need the function to work.

What can I change to make the resizeCanvas function work? Thanks in advance.

Posts: 1

Participants: 1

Read full topic