Andrew Tobilko Andrew Tobilko - 5 months ago 106
AngularJS Question

canvas.getContext is not a function

I have written a simple template for a AngularJs directive:

<div class="circle">
<canvas></canvas>
</div>


My directive has the following look:

MobileApp.directive('circle', function () {
return {
restrict: 'E',
scope: true,
link: function (scope, elem, attrs) {
...
var canvas = elem.find('canvas');
var ctx = canvas.getContext('2d');
...
}
}
});


And the usage of that is simple enough:

<circle/>


I am getting an error when trying to call a method
getContext('2d')
:


TypeError:
canvas.getContext
is not a function


The
canvas
instance is selected and its JSON representation looks

{
"0": {},
"length": 1,
"prevObject": {
"0": {},
"context": {},
"length": 1
},
"context": {},
"selector": "canvas"
}


I have already read about all related questions here, but the answer hasn't been found. Any help would be appreciated. Thanks.

Answer

I create a little plunker(https://plnkr.co/edit/mOU0ZucRSZzdWxVmTFIZ?p=preview). In your sample i don't understand the relation between directive and template. Have you missing to add template property ? What i do in plunker :

Define template :

return {
    restrict: 'E',
    scope: true,
    template: '<div><canvas></canvas></div>',
    link: function (scope, elem, attrs) {
        var canvas = elem.find('canvas');
        console.log(canvas);
        var ctx = canvas[0].getContext('2d');
        console.log(canvas, ctx);
    }
}

Get canvas from the object that return by find method :

var ctx = canvas[0].getContext('2d');

And the use :

<circle></circle>
Comments