resize canvas and merge - angularjs

Question

hi i need to create an ionic app to draw on image or pdf.
I need to drag the canvas where i want on the image, draw on it, resize it and save in another image wich is the result of the old one plus the draw canvas.
canvas is like this, now i can drag or i can draw, but i'm not capable to set 4 anchor on the edge of canvas to resize it
canvas ion-pinch overflow-scroll="false" id='signatureCanvas' on-drag="true" width="200" height="300" style='border: 1px solid black; background-color: transparent;'
the directive to drag
.directive('ionPinch', function($timeout,$ionicGesture) {
return {
restrict: 'A',
link: function($scope, $element) {
$timeout(function() {
var canvas = $element[0],
posX = 0,
posY = 0,
lastPosX = 0,
lastPosY = 0,
bufferX = 0,
bufferY = 0,
scale = 1,
lastScale,
rotation = 0,
last_rotation, dragReady = 0;
ionic.onGesture('touch drag transform dragend', function(e) {
e.gesture.srcEvent.preventDefault();
e.gesture.preventDefault();
switch (e.type) {
case 'touch':
lastScale = scale;
last_rotation = rotation;
break;
case 'drag':
posX = e.gesture.deltaX + lastPosX;
posY = e.gesture.deltaY + lastPosY;
break;
case 'transform':
rotation = e.gesture.rotation + last_rotation;
scale = e.gesture.scale * lastScale
break;
case 'dragend':
lastPosX = posX;
lastPosY = posY;
lastScale = scale;
break;
}
var transform =
"translate3d(" + posX + "px," + posY + "px, 0) " +
"scale(" + scale + ")" +
"rotate(" + rotation + "deg) ";
e.target.style.transform = transform;
e.target.style.webkitTransform = transform;
}, $element[0]);
});
}
};
})
and the controller to draw
ratio = 1.0;
$scope.dev_width = $window.innerWidth;
$scope.dev_height = $window.innerHeight;
var dev_width = $window.innerWidth;
var dev_height = $window.innerHeight;
console.log(dev_width);
var canvas = document.getElementById('signatureCanvas');
var context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext('2d').scale(ratio, ratio);
}
resizeCanvas();
var signaturePad = new SignaturePad(canvas);
$scope.clearCanvas = function() {
signaturePad.clear();
}