simple captcha in angular

captcha.js

angular.module('myApp.directives', [])
 
  .directive('captcha', function () {
  return {
    scope: { ngData: '@', ngClick: '@' },
    restrict: 'A',
    link: function (scope, el, attrs) {
      var canvas = el[0];
      var context = canvas.getContext("2d");
      var fontsize = 14;
      var x = canvas.width / 2;
      var y = canvas.height / 2 + 7;
      
      canvas.addEventListener("click", scope.ngClick, false);
      
      context.font = fontsize + "pt serif";
      context.textAlign = 'center';
      context.fillStyle = "#fff";
      
      scope.$watch("ngData", function (newValue, oldValue) {
        if (newValue !== oldValue) {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillText(newValue, x, y);
        } else {
          context.fillText(oldValue, x, y);
        }
      });
    }
  };
});

usage:

<canvas width="80px" height="30px" class="captcha" style="margin-right: 20px;" 
ng-data="{{captcha}}" ng-click="reloadCaptcha()" captcha></canvas>