Canvas object says undefined getContext () method in Angular JS / iONIC?
I am working on an ionic framework for mashup development. The app requires a signature plugin, I saw JSignature & SiganturePad had a nice implementation. but both of them are implemented with jQuery support.mine is fully supported by Angular JS.
From the options above, I decided to move on to implementing SignaturePad in my application. I am populating SignaturePad html using $ ionicModal . This is where code stuff is added.
Signature.html
<ion-modal-view>
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button class="button clear" data-action="clear" ng-click="doSave()">Clear</button>
<button class="button save" data-action="save">Save</button>
</div>
</div>
</ion-modal-view>
Js here
$ionicModal.fromTemplateUrl('templates/signature.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
$scope.wrapper = angular.element(document.getElementById("signature-pad"));
var canvas = angular.element($scope.wrapper.find('.canvas'));
SignaturePad(canvas);
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
//$timeout($scope.openModal, 200);
$scope.doSave=function()
{
if (angular.isUndefined($scope.signaturePad)) {
alert("Please provide signature first.");
} else {
window.open($scope.signaturePad.toDataURL());
}
};
var SignaturePad = function (canvas, options) {
var self = this,
opts = options || {};
this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
this.minWidth = opts.minWidth || 0.5;
this.maxWidth = opts.maxWidth || 2.5;
this.dotSize = opts.dotSize || function () {
return (this.minWidth + this.maxWidth) / 2;
};
this.penColor = opts.penColor || "black";
this.backgroundColor = opts.backgroundColor || "rgba(0,0,0,0)";
this.onEnd = opts.onEnd;
this.onBegin = opts.onBegin;
this._canvas = canvas;
this._ctx = canvas.getContext("2d");
console.log("CANVAS"+this._canvas.width);
//this.clear();
// this._handleMouseEvents();
// this._handleTouchEvents();
};
});
I am having problem referencing DOM elements from html via getElementbyID (). This issue was fixed with the following solution. ionic modal reference
By default, Angular js provides some functionality via jQuery / jqlite . So after all the trouble and I got it to work this morning. But according to jqlite, canvas elements are accessed via id or selectors returned as a jQuery object, not as a canvas. Since it is a jQuery object, I cannot use the canvas property. So after running the code, I get an error like
TypeError: Object [object Object] has no getContext method
How can I render as a canvas class or is there a way to satisfy my requirements?
source to share
Returns an array
angular.element
Returns the item
angular.element[0]
So, to get a 2d context, we have to do:
angular.element[0].getContext('2d') //angular.element[0] must be a canvas element
By the way, it's better to be careful when using angular.element inside the controller. This will make your test difficult.
source to share