A lot of things on the internet are very conflicting on how to deal with things.

Here's my situation:

I'll be building a client in javascript, using the HTML5 canvas, the canvas will contain multiple images (ranges from 20 to 5000), which will have to be drawn, they can also move (sometimes all at once).

Now I will only redraw "differences" in the screen instead of the whole screen, but still, should I pre-render the images somehow? Cases can occur where a lot of the images will be moving.

I read about pre-rendering them in an off-screen canvas, and that would help to render them again. But does that method really help me to improve the performance? I mean it is not professional at all to have a canvas for every image right?

If not, are there other good methods to help rendering everything? Or shouldn't I worry about performance?

Using multiple layers isn't an option here by the way. (actually what I described here is 1 layer of 3 already)

Kind regards Jonas

  • 3
    What is your bottleneck? If you don't know, likely it's too early to optimize. Maybe it's image rendering time, maybe it's RAM usage, maybe it's the way you do blitting. Measure, then optimize. Make a quick proof-of-concept rendering pipeline of either sort. Maybe you'd find animation of a canvas too slow no matter what, and would opt for e.g. WebGL. Maybe everything would still be fine with on-demand image rendering. – 9000 Jun 5 '17 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.