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.