Simple canvas in angularjs directive

Question

I'm stuck (probably on some dumb mistake) trying to make a directive work with a canvas.

When I execute my code I get an element.getContext is not a functionwhich seems weird as 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 a fiddle where I placed a simplified version of my code and can´t make work.

Any help will be very appreciated.

Answer 1

You should replace:

element.getContext('2d');

With:

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