Starter directive

directive.js

angular.module('myApp.directives', [])

.directive('myCanvas', function() {
  return {
    // Angular needs to know what type of usage we want to allow for this (attribute, class name, or tag). 
    // For this example, a tag is great.
    restrict: 'E',
    
    // We want to replace the original custom tag with a template
    replace: true,
  
    // The template code to replace our tag with. You can also use templateUrl
    // to laod this from a template
    template: '<canvas></canvas>',
    
    // The link function is called after the element is compiled and then 
    // attached to the active scope
    link: function($scope, $element, $attr) {
      
      // $element[0] is now our canvas element after replacing the
      // original tag with the template
      var ctxSource = $element[0].getContext('2d');
 
      // can do our magic now
      var img = new Image();
      img.src = "images/tina.png";
      img.onload = function() {
        ctxSource.drawImage(img, 0, 0);
      };
      
    }
  }
})

Then you can use this like this:

<my-canvas></my-canvas>