Game engine - stress test and performance

[nosiu]

Hi,  After writing few times games in different languages (mostly some student projects), I came up with an idea to write my own 2d engine in JavaScript. My main goal is to learn something new (and to have fun with it).

Simple project became huge and even lived to see its own sprite-model'ish-animations editor. 

My problem is performance and not fixed number of frames:
 

1500 elements stress test:
https://jsfiddle.net/uwmktzq6/embedded/result/
code:
http://jsfiddle.net/uwmktzq6/

(I tried to remove unnecessary lines of code to improve readability)

Conclusions: drawImage function occupies 83% of total script execution time (screen: http://i.imgur.com/zy5SB7s.png) and the frame rate is not stable (~40-60) (screen: http://i.imgur.com/KBNF4V7.png). I'm pretty sure that it's not garbage collector's fault.

I would like to mention that i cache every 'shape' and draw it as whole image later because it is faster than painting each shape 60 times per second also in example above i draw everything even if some element is outside the canvas. 
You probably wonder why would anyone need 1500 objects on screen, well i don't need them but it should be possible to do. For example Pixi can handle (on my machine) 10 000 bunnies at the same time (http://www.goodboydigital.com/pixijs/bunnymark/) and I'm sure they are not using web workers in that example.

I even tried to get some hints how to improve code from Chrome's V8 JavaScript engine  but results are not stunning.
Pre-rendering frames sounds cheap for only 1500 elements so i didn't try it.

My question is: are there any tricks to improve performance of drawing images? Or maybe I'm doing wrong something else?

 

 

[b10b]

Canvas is quite fast if used properly, but WebGL approaches are usually always going to win Bunnymark tests.

 

Consider that performance of drawImage() can vary significantly from device to device, browser to browser dependent upon whether Canvas or Image is passed as the input source.  An elaborate engine tests which performs best ahead of time, and uses the optimal input at runtime.  Also consider that drawImage() calls using integers often perform better than floats.

 

As always with HTML5, no golden rules exist, every case is a unique case

[kcaze]

I'll try to type out a more detailed response with sample code later, but I think you should try using ImageData instead of calling drawImage.