Javascript, canvas fillstyle doesn't consistently change color

Question

This is part of a much larger code, but for some reason I cannot control the color of the drawn arc. When I create the arc and then call the draw function, the arc appears but it is filled in black. (not the expected blue)

    class calnote {
    constructor() {
        this.radius = calnoteradius;
        this.positionx = Math.floor(Math.random() * 700);
        this.positiony = Math.floor(Math.random() * 500);

    }
    change_position() {
        this.positionx = Math.floor(Math.random() * 700);
        this.positiony = Math.floor(Math.random() * 500);
        
    }
    draw(ctx) {
        
        ctx.beginPath();
        ctx.arc(this.positionx, this.positiony, this.radius,0, 2 * Math.PI);
        ctx.fillstyle = "#0000FF";
        ctx.fill();
        ctx.closePath();
    }
}

However later I call this function

function drawScore() {
        ctx.beginPath();
        ctx.font = "16px Arial";
        ctx.fillStyle = "#FF0000";
        ctx.fillText("Combo: "+ combo, 8, 40);
        ctx.fillText("Score: "+ score, 8, 20);
        ctx.closePath();
    }

and now the score is written in red, and the arcs are filled in red when drawn. (if I change this color it changes the score and all later arcs, so I can make them blue, green, etc.).

Finally, I know the draw function is updating because:

1. the position of the arc updates appropriately when the x and y positions are changed
2. when I call console.log(ctx.fillstyle), the logged hex values change appropriately (so in this case it will log #0000FF) even though the arc displayed is red
3. in my interval loop, I do call ctx.clearRect(0,0,canvas.width, canvas.height); hence the position updating appropriately.

If anyone has any ideas please let me know.

Answer 1

Looks like just a typo on your ctx.fillstyle = "#0000FF"; the S should be uppercase

 class calnote { constructor() { this.positionx = Math.floor(Math.random() * 100); this.positiony = Math.floor(Math.random() * 100); } change_position() { this.positionx = Math.floor(Math.random() * 100); this.positiony = Math.floor(Math.random() * 100); } draw(ctx) { ctx.beginPath(); ctx.arc(this.positionx, this.positiony, 10, 0, 2 * Math.PI); ctx.fillStyle = "#0000FF"; ctx.fill(); } } function drawScore() { ctx.beginPath(); ctx.font = "16px Arial"; ctx.fillStyle = "#FF0000"; ctx.fillText("Combo: ", 8, 40); ctx.fillText("Score: ", 8, 20); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height) drawScore() note.change_position() note.draw(ctx) } var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); note = new calnote() setInterval(draw, 200);

 <canvas height="160" width="300" id="c"></canvas>