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