Why isn't my score function showing up in my canvas with ctx.fillText?

Question

I'm developing a snake game using canvas but am having trouble with displaying the player's score in the upper right corner. This should be handled in the drawScore function but the text doesn't appear. I'm not getting any errors in the console, nor can I find any problem with the code itself.

Any advice would be appreciated!

class SnakePart {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
}

const body = document.body;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

let speed = 7; // base speed variable of snake

const snakeParts = [];
let tailLength = 2;

let tileCount = 20;//number of tiles on screen
let headX = 10;//snake width
let headY = 10;//snake height
let tileSize = canvas.width / tileCount - 2;//size of tiles where apple spawns
let xv = 0;// x axis velocity
let yv = 0;//y axis velocity
let ax = 5;//apple position x axis
let ay = 5;//apple position y axis
let score = 0;
    
//draws game loop
function drawGame(){
    //game loop
    clearScreen();
    changeSnakePosition();
    checkAppleCollision();
    drawApple();
    drawSnake();
    drawScore();
    setTimeout(drawGame, 1000/speed);
}

function drawScore(){
    ctx.fillStyle = 'white';
    ctx.font = '12px Helvetica';
    ctx.fillText = ("Score: " + score, canvas.width-50, 10);
}

function clearScreen(){
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canvas.width,canvas.height);
}

function drawSnake(){
    ctx.fillStyle = 'orange';
    ctx.fillRect(headX * tileCount, headY * tileCount, tileSize,tileSize);
    ctx.fillStyle = 'green'
    for(let i = 0; i<snakeParts.length; i++){
        let part = snakeParts[i];
        ctx.fillRect(part.x *tileCount,part.y*tileCount,tileSize,tileSize)
    }
    snakeParts.push(new SnakePart(headX,headY)); //put a segment at the end of the snake next to the head
    while(snakeParts.length > tailLength){
        snakeParts.shift(); //remove the furthest item from the snake parts if we have more than our tailSize.
    }
}

body.addEventListener('keydown', keyDown);
    
function keyDown(event){
    switch(event.keyCode) {
        case 37:
            if(xv == 1)
            return;
            yv = 0;
            xv = -1
            break;
        case 38:
            if(yv == 1)
            return;
            yv= -1;
            xv = 0;
            break;
        case 39:
            if(xv == -1)
            return;
            yv = 0;
            xv = 1
            break;
        case 40:
            if(yv == -1)
            return;
            yv = 1;
            xv = 0;  
    }
}

function changeSnakePosition(){
    headX = headX + xv;
    headY = headY + yv;
}

function drawApple(){
    ctx.fillStyle = 'red';
    ctx.fillRect(ax*tileCount,ay*tileCount,tileSize,tileSize)
}

function checkAppleCollision(){
    if(ax === headX && ay == headY){
        ax = Math.floor(Math.random()*tileCount);
        ay = Math.floor(Math.random()*tileCount);
        tailLength++;
        score++;
        speed++;
    }
}

drawGame();

<canvas id="canvas"></canvas>

Answer 1

The problem is this line :

ctx.fillText = ("Score: " + score, canvas.width-50, 10);

Which should be :

ctx.fillText("Score: " + score, canvas.width-50, 10);

Here's a stripped down example :

const body = document.body;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

let score = 0;
    
function drawGame() {
    clearScreen();
    drawScore();
}

function drawScore() {
    ctx.fillStyle = 'white';
    ctx.font = '12px Helvetica';
    ctx.fillText("Score: " + score, canvas.width-50, 10);
}

function clearScreen() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canvas.width,canvas.height);
}

drawGame();

<canvas id="canvas"></canvas>