HTML5 Canvas performance very poor using rect()
I'm writing a game, which displays the score at the top of the screen in the following fashion: canvasContext.fillStyle = "#FCEB77"; canvasContext.fillText(' Score: ' + Math.floor(score) + ' Lives: ' + Math.floor(lives) + ' other info: ' + Math.floor(otherInfo)); Which works fine. What I then wanted to do was to draw a box around that text; so I tried the following: canvasContext.rect(2, 1, 210, 30); canvasContext.rect(2, 1, 80, 30); canvasContext.rect(80, 1, 70, 30); canvasContext.strokeStyle = "#FCEB77"; canvasContext.stroke(); And when I ran the game the impact of performance was