Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="myApp">
<textarea type="text" ng-change="drawCanvas()" ng-model="upperText" placeholder="upperText"></textarea>

<canvas id="myCanvas" memeimage></canvas>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('memeimage', function () {
      return {
        restrict: 'A',
        link: function (scope, el, attrs) {

          scope.upperText = "";
          scope.fontsize = 50;

          scope.drawCanvas = function () {

            var canvas = el[0];
            var context = canvas.getContext("2d");

            context.font = scope.fontsize + "px  Impact";
            context.fillStyle = 'white';
            context.strokeStyle = 'black';
            var x = canvas.width / 2;
            var y = canvas.height / 6;
            context.textAlign = 'center';
            context.fillText(scope.upperText.toUpperCase(), x, y);
            context.lineWidth = 2;
            context.strokeText(scope.upperText.toUpperCase(), x, y);


          };
        }
      }
    });