5
\$\begingroup\$

I have just recently started some experiments with game development in Javascript/HTML5, and so far it has been going pretty well. I have a simple test scene running with some basic input handling, and a hundred-ish drawImage() calls with a few transforms. This all runs great on Chrome, but unfortunately, it already chugs on Firefox. I am using a very large canvas ( 1920 x 1080 ), but it doesn't seem like I should be hitting my limit already. So on that note, I was hoping to ask a few questions:

1) What exactly is done on the CPU vs. the GPU in terms of canvas and drawImage()? I'm afraid the answer is probably "it depends on the browser", but can anybody give me some rules of thumb? I naively imagined that each drawImage call results in a textured quad on the GPU with the canvas effectively being a render target, but I'm wondering if I'm pretty far off base there...

2) I have seen posts here and there with people saying not to use the translate(), rotate(), scale() functions when drawing on the canvas. Am I adding a lot of overhead just by adding a translate() call, as opposed to passing in the x,y to drawImage()? Some people suggest using "transate3d", etc., which are CSS properties, but I'm not sure how to use them within a scene. Can they be used for animated sprites within a single canvas?

3) I have also seen a lot of posts with people mentioning that pre-building canvases and then re-using them is a lot faster than issuing all the individual draw calls again. I am guessing that my background should definitely be pre-built into a canvas, but how far should I take this? Should I maintain an individual canvas for each sprite, to cache all static image data when not animating?

Thank you much for your advice!

\$\endgroup\$
1

2 Answers 2

Reset to default
2
\$\begingroup\$

If you are redrawing the entire canvas several times a second this can be slow on any browser (had the same problem when testing on the g/f's low spec laptop).

Could you look into only redrawing the areas you need, and therefore reducing the amount of canvas that is redrawn in each frame?

This is how I got the greatest performance increase in my small demo app.

\$\endgroup\$
4
  • \$\begingroup\$ I'd like to try only redrawing certain areas, but I am unsure how to accomplish it for my desired effect. My game is designed to have a large scrolling world in X & Y ( to-down view ), with a number of "entity" sprites moving on top of that world. The world BG is entirely static, but since it can scroll, it seems like I still need to redraw it to the canvas each frame. I have tried drawing the BG into a large offscreen canvas and then drawing a subsection into the main one, but it doesn't seem to get me much performance gain. Are there better ways of accomplishing the scrolling BG effect? \$\endgroup\$
    – jujumbura
    Commented Sep 18, 2012 at 15:15
  • \$\begingroup\$ For my particular example the background was static so I got a big benefit by not needing to redraw each frame (I just did the sprites). Afraid I'm not sure how best to cater for a scrolling BG :( \$\endgroup\$
    – dougajmcdonald
    Commented Sep 18, 2012 at 15:35
  • \$\begingroup\$ think about using layered canvases, and you might balance graphic load by updating some of them less often, and also win time only clear your sprites on the main canvas instead of clearing whole canvas. \$\endgroup\$
    – GameAlchemist
    Commented Dec 10, 2012 at 0:53
  • \$\begingroup\$ @jujumbura you can try this method: gamedev.stackexchange.com/questions/132521/… \$\endgroup\$
    – Kitanga Nday
    Commented Jan 7, 2017 at 11:28
-1
\$\begingroup\$

You can check out my answer for this question: Is it alright to have hundreds of canvas object on screen?

Since both questions are performance related.

\$\endgroup\$
3
  • \$\begingroup\$ Please don't recycle answers, especially if the 2 questions aren't really related \$\endgroup\$
    – Bálint
    Commented Jan 7, 2017 at 11:24
  • \$\begingroup\$ Have you read the answer? in the link. It not only answers the question it's in, but also answers this one since they are both about canvas performance. \$\endgroup\$
    – Kitanga Nday
    Commented Jan 7, 2017 at 11:28
  • \$\begingroup\$ the answer there doesn't answer the question, because the OP didn't use those canvases for rendering, but tobstore sprites. This question has 3 specific sub questions, neither of which you answer. \$\endgroup\$
    – Bálint
    Commented Jan 8, 2017 at 14:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .