Ionic1 canvas fillText() character is disappering after view change


#1

Hi,
I am Trying to Place characters on the Canvas using canvas.fillText(). with the state change it is working fine for the first time, but if i come back to menu and place a character again, the character is not displaying in the canvas.

<ion-view>
  <ion-content scroll='false'>
    <button class="button ion-reply canvasBtn" ng-click="prevLetter()"></button>
    <button class="button ion-navicon-round canvasBtn" ng-click="goToMenu()"></button>
    <button class="button ion-forward canvasBtn" ng-click="nextLetter()"></button>
    <button class="button ion-waterdrop canvasBtn" ng-click="goToSettings()"></button>
    <div class="front">
      <canvas id="canvasId">
      </canvas>
    </div>
  </ion-content>
</ion-view>

and the controller is


  var canvasVar = document.getElementById('canvasId');
  var canvasCx = canvasVar.getContext('2d');
  i = 0;
  var recvChar = $stateParams.char
  if(recvChar != null)
    setupCanvas(recvChar)

  function setupCanvas(character) {
    canvasVar.height = window.innerHeight;
    canvasVar.width = window.innerWidth;
    canvasCx.lineWidth = 14;
    canvasCx.lineCap = 'round';
    canvasCx.strokeStyle = 'rgb(0, 0, 50)';
    canvasCx.font = 'bold 25em helvetica';
    canvasCx.fillStyle = 'rgb(255, 0, 0)';
    canvasCx.textBaseline = 'middle';
    drawletter(character);
  }

  function drawletter(char) {
    //making letter a global variable - not the right way :) dirty solution
    letter = char;
    centerx = (canvasVar.width - canvasCx.measureText(letter).width) / 2;
    centery = canvasVar.height / 2;
    canvasCx.fillText(letter, centerx, centery);
  } //end of draw letter

What am i doing wrong ?

you can find total code at my repo