How to properly render a html5 canvas game with best performance results

I hope my English is good enough.

The Problem: I am developing some canvas game, using context2d. I did a perfomance test to see how well canvas render and stuff. For painting, the method drawImage was used with some 50x50 jpg preloaded in memory at start.

My test was to instantiate a lot of logic square 50x50 objects moving random in the canvas with no collission just to see the fps.

main loop was done with interval.

The problem, i noticed low fps when about 3000 random 50x50 on the screen, well i know the more you render, the less framerate. But i wanna ask something.

The question:

Is a good idea render every logic object in the canvas screen alone? For example, with no collision, if i overlap two 50x50 in the same position, or almost the same position, the visible output is something lesser than (50·50)2 pixels, but i am drawing (50·50)2 pixels using drawimage for each element in the main loop.

Hope you guys understand the problem and the question. Render al开发者_开发知识库ternatives? some logic techniques to archieve this instead of rendering every object alone?

I understand what you are asking, you are asking maybe you should try and rendering the collisions so you don't have to draw twice. Well frankly, I think you'd be better off just drawing the second square on top of the first one, and I'll tell you why:

Your logic will probably take more actions to determine the amount of overlapping and drawing the more complex shape, then actually drawing it.

So in my opinion, you'd be better off not testing for collisions in this one.

People, correct me if I'm wrong.

Definitely just draw. The bitblt (pixel copy) is optimized and will certainly be faster than collision logic between sprites. However, the one exception is possibly testing for off-screen sprites. This is a fast test because you're only checking against the screen bounds, that is, if a sprite is off the screen. If you have 10,000+ sprites, and many are off-screen most of the time - for example when zoomed in - then the test is worth it.. If they're always on screen, then just draw.