Canvas .fillText 함수가 처음으로 작동하지 않습니다.

Question

캔버스에 문자를 그리려는 것입니다. 캔버스에 문자를 그리는 데 filltext()을 사용하고 있습니다.

처음 작동하지만 메뉴로 돌아가 다시 시도하면 캐릭터가 캔버스에 표시되지 않습니다.

콘솔 로그에서 오류를 찾으려고 할 때 함수가 호출되고 글자도 그려진다. (나는 캔버스에있는 픽셀의 수를 계산하고있다.) 어떻게 든 캔버스에 글자를 표시하지 않는다. .

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 

총 코드에서 찾기 : 당신은 페이지 캐시를 제거하면 github repo

Answer 1

이이 문제를 해결할 수