Canvas .fillText function not working after the first time

Viewed 401

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

1 Answers

if You remove page cache it will solve problem

Related