Javascript, canvas fillstyle doesn't consistently change color

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.