How to position a textarea in top of canvas


#1

I need some help to add a textarea on top of a canvas

what i want to do is

The textarea should be center aligned inside the canvas
I am using ionic slidebox
The aligngment value passed in css has to be passed from ionic controller
I have given sample code i tried the following code moves the textarea left and top aligned as well as when we move slides the text area position moves little right

I am not able to center the textarea inside canvas as well as i am not able to pass values from controller to css

My html file is

<ion-slide-box on-slide-changed="slideHasChanged(count)">
        <ion-slide  ng-repeat="array in array">

            <ion-content class="bkcolor">
                <canvas id="{{array.text_id}}" height="{{height}}" width="{{width}}">
                </canvas>
                <div class="mytext" align="center">
                    <textarea class="transpatenr" ng-model="upperText" ng-change="changefn(upperText)"></textarea>
                </div>
            </ion-content>
        </ion-slide>
    </ion-slide-box>

This is my js file

RequestPrcs.getcatdata(0, 2).then(function(res){
            for (var i in res){   
                $scope.array.push(res[i]['t_text']);
                $scope.count = res[0]['t_text']['text_id'];
                $scope.upperText = $scope.array[0]['text'];
            }
            $ionicSlideBoxDelegate.update();
            $timeout(function(){
            var canvas = document.getElementById($scope.count);
                var context = canvas.getContext('2d');
                context.font = "30px Arial";
                context.fillStyle="#F5F3EE";
                context.fillRect(0,0, 600, 600);
                var dataURL = canvas.toDataURL();
                $scope.image = dataURL;
            });
        });



    $scope.slideHasChanged = function(index){
        $ionicSlideBoxDelegate.update();
        var idarr = $ionicSlideBoxDelegate.currentIndex();
        $scope.count = $scope.array[idarr]['text_id'];
        $scope.upperText = $scope.array[idarr]['text'];
        var nextpg = parseInt($scope.array.length);
        RequestPrcs.getcatdata(nextpg, 1).then(function(res){
        if(res.length)
        {
            for (var i in res){ 
                $scope.array.push(res[i]['t_maazak_text']);
            }
        }
        });
        $timeout(function(){
        var canvas = document.getElementById($scope.count);
            var context = canvas.getContext('2d');
            context.font = "30px Arial";
            if ($scope.bgimage === ""){
                context.fillStyle="#F5F3EE";
                context.fillRect(0,0, window.innerWidth, window.innerHeight);
            }
            else{
                var context = canvas.getContext('2d');
                    var source =  new Image();
                    source.src = $scope.bgimage;
                    $timeout(function(){
                        context.drawImage(source,0,0);

                    context.font = "30px Arial";
                    context.fillStyle="yellow";
                    context.fillText("",10,50);
                    var dataURL = canvas.toDataURL();

                    });  
            }
            var dataURL = canvas.toDataURL();
            $scope.image = dataURL;
        });
    };

and my css is

.mytext {
    position: absolute;
    top: 40px;
    z-index: 999;
    background-color: transparent;
    text-align: center;
}
.transpatenr {
    background-color: transparent;
    color:blue;
    font-size: 20px;
    text-align: center;
}
textarea:focus {
    background-color: transparent;
    color:blue;
}