更新显示在 HTML5 画布上的 JavaScript 变量的值

我正在制作一个基于Web的游戏，使用HTML5画布和JavaScript教用户一些基本的威尔士语。目前，我的游戏有一个数字 1-10 的图像列表，以及数字 1-10 的威尔士语单词列表。当用户启动游戏时，画布上会显示图像列表中的随机图像和单词列表中的随机单词。还会显示勾号和叉号，用户需要通过单击勾号或叉号来指示显示的单词是否与显示的数字正确。

我有一个JavaScript变量"currentScore"，它显示在画布顶部的"分数栏"中，每当用户正确选择图像和显示的单词是否表示相同的数字时，我都会更新该变量。但是，我无法弄清楚如何做到这一点。

目前，我有以下代码，它在画布上显示分数，但在错误的位置 - 它低于分数栏。它也以某种"气泡"字体显示它，而不是 Calibri，这是我想要使用的字体。

此外，当用户多次单击刻度或十字，并且另一个点被添加到用户的分数中时，尽管 currentScore 的值已更新并写入画布(在同一个错误的位置(，但它不会清除之前写在那里的分数，所以我最终会在画布上相互叠加写几个分数， 这使得实际分数不清楚，因为它很难阅读。

这是我函数的代码：

/*Add an event listener to the page to listen for a click on the tick or the cross, if the user clicks
            the right one to indicate whether the image and word relate to the same number or not, increase the
            user's score*/
        myGameCanvas.addEventListener('click', function(e){
            console.log('click: ' + e.pageX + '/' + e.pageY);
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            /*If the tick is clicked, check whether or not the image and word represent the same number, if they do,
                increase the score, if not, leave the score as it is*/
            if((mouseX > 250 && mouseX < 300) && (mouseY > 200 && mouseY < 250) && (drawnImage == drawnWord)){ 
                currentScore = currentScore + 5;
                var scorePositionX = currentScorePositionX;
                var scorePositionY = currentScorePositionY;
                context.clearRect(scorePositionX, scorePositionY, 30, 30); /*Clear the old score from the canvas */
                context.strokeText(currentScore, 650, 50); /*Now write the new score to the canvas */
                console.log('Current Score = ' + currentScore);
            } else if((mouseX > 250 && mouseX < 300) && (mouseY > 200 && mouseY < 250) && (drawnImage != drawnWord)){
                currentScore = currentScore; 
                console.log('Current Score = ' + currentScore);
            /*If the cross is clicked, check whether or not the image and word represent the same number, if they 
                don't, increase the score, otherwise, leave the score as it is*/
            } else if((mouseX > 350 && mouseX < 400) && (mouseY > 200 && mouseY < 250) && (drawnImage != drawnWord)){
                currentScore = currentScore + 5;
                context.clearRect(currentScorePositionX, currentScorePositionY, 20, 20); /*Clear the old score from the canvas */
                context.strokeText(currentScore, 500, 50); /*Now write the new score to the canvas */
                console.log('Current Score = ' + currentScore);
            } else if ((mouseX > 350 && mouseX < 400) && (mouseY > 200 && mouseY < 250) && (drawnImage == drawnWord)){
                currentScore = currentScore; 
                console.log('Current Score = '+ currentScore); 
            } else {
                console.log('The click was not on either the tick or the cross.');
            }
        }, false);

有人可以向我指出我做错了什么，以及如何让当前分数显示在我的分数栏中，并在每次用户通过单击刻度或十字的正确选项注册分数时更新？

我的分数栏的代码是：

function drawGameElements(){
            /* Draw a line for the 'score bar'. */
            context.moveTo(0, 25);
            context.lineTo(700, 25);
            context.stroke();
            /* Draw current level/ total levels on the left, and current score on the right. */
            context.font = "11pt Calibri"; /* Text font & size */
            context.strokeStyle = "black"; /* Font colour */
            context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
            context.strokeText(currentScore, currentScorePositionX, currentScorePositionY);
        }

谢谢。