JSFiddle - React, Tailwind, and code Playground

by Harsha Jayamanna

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div ng-app ng-controller="LoginController" >

    <div>Hello {{ user.firstName }}</div>
    <input ng-model="user.firstName" ng-change="render()">
    
    <div ng-repeat="login in logins">{{ login }}</div>

    <canvas id="c" width="500" height="500"></canvas>
   <br/>

</div>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

function LoginController($scope) {
    $scope.user = {
        firstName: "Foox",
        lastName: "Bar"
    };



    jsonobj ={"objects":[{"type":"textbox","originX":"left","originY":"top","left":100,"top":100,"width":220,"height":28.84,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over",
    "text":$scope.user.firstName,
    "fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"center","textBackgroundColor":"","styles":{},"minWidth":20}],"background":"#fff"};



var canvas = window._canvas = new fabric.Canvas('c');

canvas.setBackgroundImage( "" , canvas.renderAll.bind(canvas));
canvas.renderAll();
canvas.loadFromJSON(jsonobj, function(obj) {
        canvas.renderAll();
    });
        
  $scope.render = function() {
  	jsonobj.objects[0].text = $scope.user.firstName;
    canvas.loadFromJSON(jsonobj, function(obj) {
        canvas.renderAll();
    });
  };
              
        
}