JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
  <div ng-app="myApp" >
 <div ng-controller="canvasCtrl">
        canvas
        <div data-draggable-canvas kineticobj=canvasKineticObj kineticstageobj=canvasKineticStageObj isdraggable=isDraggable id="canvas">&nbsp;</div>
    </div>
    </div>

JavaScript

var app=angular.module('myApp', []);
    app.controller('canvasCtrl', function($scope){
        $scope.canvasKineticObj = false;
        $scope.canvaskineticStageObj = false;
        $scope.isDraggable = true;
    });
   
    app.directive('draggableCanvas', ['$rootScope', function ($rootScope) {
        return {
            restrict: 'A',
            scope: {
                kineticobj: '=',
                kineticstageobj: '=',
                isdraggable: '='
            },
            link: function (scope, el, attrs) {
            console.log("in");
                if (!scope.kineticstageobj) {
                    var id = attrs["id"];
                    //create random unique id
                    if (!id) {
                        id = Math.random().toString(36).substring(7);
                    }
                    if (!scope.kineticstageobj) {
                        scope.kineticstageobj = new Kinetic.Stage({
                            container: id,
                            width: 578,
                            height: 200
                        });
                    }
                    if (!scope.kineticstageobj.container) {
                        scope.kineticstageobj.attrs.container = id;
                    }
                }
                var layer = new Kinetic.Layer();
                var rectX = scope.kineticstageobj.getWidth() / 2 - 50;
                var rectY = scope.kineticstageobj.getHeight() / 2 - 25;
                
                //if kineticObj is null, init
                var options = {
                    x: rectX,
                    y: rectY,
                    width: 100,
                    height: 50,
                    fill: '#00D2FF',
                    stroke: 'black',
                    strokeWidth: 4,
                };
                if (scope.isdraggable) {
                    options.draggable = true;
                }
                if (!scope.kineticobj) {
                   ...