I am just trying to draw a letter on canvas. I am using filltext() to draw a character on canvas.
It is working on the first time but if I go back to menu and try again the character is not displaying on the canvas.
While I am trying to find any errors with console log, it is showing me function is called and the letters are also drawn (I am calculating the number of pixels on canvas) but somehow I am not getting letter on canvas display.
function setupCanvas(character) {
canvasVar.height = window.innerHeight;
canvasVar.width = window.innerWidth;
canvasCx.lineWidth = 14;
canvasCx.lineCap = 'round';
canvasCx.strokeStyle = 'rgb(0, 0, 50)';
//canvasCx.strokeStyle = $rootScope.userPreferedColor;
canvasCx.font = 'bold 25em helvetica';
canvasCx.fillStyle = 'rgb(255, 0, 0)';
canvasCx.textBaseline = 'middle';
drawletter(character);
//pixels = canvasCx.getImageData(0, 0, canvasVar.width, canvasVar.height);
//console.log(JSON.stringify(pixels))
}
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.clearRect(0, 0, canvasVar.width, canvasVar.height);
canvasCx.fillText(letter, centerx, centery);
//getting the border for the letter only
pixels = canvasCx.getImageData(centerx,0,canvasCx.measureText(letter).width,canvasVar.height);
console.log("letter is drawn to the canvas "+ getpixelamount(255, 0, 0));
}//end of draw letter
Find the Total Code at : github repo