javascript - HTML5 Canvas performance very poor using rect() - Stack Overflow

admin管理员组

文章数量:1391969

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 unbelievable. I'm clearing the entire canvas each frame, but drawing three rectangles seems to kill the performance. Can anyone tell me why, and how to get around this?

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 unbelievable. I'm clearing the entire canvas each frame, but drawing three rectangles seems to kill the performance. Can anyone tell me why, and how to get around this?

• javascript
• html
• windows-8
• html5-canvas
• winjs

Share Improve this question Follow asked May 20, 2013 at 16:23 Paul MichaelsPaul Michaels 16.7k4747 gold badges153153 silver badges276276 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

LIVE DEMO

Try add the beginPath method, like the following code:

canvasContext.beginPath();
canvasContext.rect(2, 1, 210, 30);
canvasContext.rect(2, 1, 80, 30);
canvasContext.rect(80, 1, 70, 30);
canvasContext.strokeStyle = "#FCEB77";
canvasContext.stroke();
canvasContext.closePath();

When drawing using a path, you are using a virtual "pen" or "pointer". Without the path, will cause direct changes on canvas state machine which make things slow.

closePath is not really necessary in this case, but is there to illustrate the usage.

Try demo with and without the (begin/close)Path and pare the performance. I provided a rough fps counter but it is sufficient to see the decrease in performance.

You might need to check this on other browsers, including mobiles, so I set this JSPerf test.

本文标签： javascriptHTML5 Canvas performance very poor using rect()Stack Overflow