Canvas .fillText Funktion funktioniert nicht nach dem ersten Mal

Question

Ich versuche nur, einen Brief auf Leinwand zu zeichnen. Ich verwende filltext(), um ein Zeichen auf Leinwand zu zeichnen.

Es funktioniert beim ersten Mal, aber wenn ich zurück zum Menü gehe und es erneut versuche, wird der Charakter nicht auf der Leinwand angezeigt.

Während ich versuche, irgendwelche Fehler mit dem Konsolenprotokoll zu finden, zeigt es mir Funktion wird aufgerufen und die Buchstaben werden auch gezeichnet (ich berechne die Anzahl der Pixel auf Leinwand), aber irgendwie bekomme ich keinen Buchstaben auf der Leinwand .

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 

Finden Sie die Summe Code an: github repo

Answer 1

wenn Sie Seiten-Cache entfernen wird es ein [Minimum, überprüfbare Beispiel] Problem