Simple canvas in angularjs directive

Question

I got stuck (maybe on some kind of dumb mistake) trying to do a directory job with the canvas.

When I execute my code, I get element.getContext is not a function , which seems strange since my element is actually an HTMLCanvasElement.

This is my directive.

 .directive('pitchCanvas', function() { function link(scope, element, attrs) { console.info('element: ' + element); var ctx = element.getContext('2d'); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); } return { restrict: 'E', replace: true, scope: true, link: link, template: '<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>' }; }) 

and this is fiddle , where I posted a simplified version of my code and cannot do the work.

Any help would be greatly appreciated.

Answer 1

You must replace:

 element.getContext('2d'); 

FROM

 element[0].getContext('2d');