Angular: Empty Fiddle

http://angularjs.org/

by devitate

HTML

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


    
</div>

JavaScript

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

myApp.directive('memeimage', function () {
      return {
        restrict: 'EA',
        template:'<canvas></canvas>',
        replace:true,
        link: function (scope, el, attrs) {

          scope.upperText = "";
          scope.fontsize = 50;
          var c = el[0];   
            c.height = 200;
          var ctx = c.getContext("2d");
           
 
          scope.drawCanvas = function () {

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

            
          };
        }
      }
    });