0

I use processing.js to draw some shapes on a canvas.

If I draw more than 100-200 circles which are constantly moving on the canvas the FPS drops significantly. If I remove the drawing the FPS goes back to 60 so the other tasks do not affect the FPS.

fill(mR,mG,mB);
ellipse(mX,mY,mRadius,mRadius);

I know, for example, that for complex shapes you can draw them onto another canvas in memory to cache them and then simply draw that canvas onto the main one.

Is there any way to improve this drawing performance?

Some links that may help:
http://www.html5rocks.com/en/tutorials/canvas/performance/
http://ramkulkarni.com/blog/improving-animation-performance-in-html5-canvas-part-ii/

But I couldn't use any of these in my context, or to integrate them with Processing.js.

EDIT: Actually it looks like it can handle ~1000shapes before the fps start to drop. Tested on Google Chrome with GPU rendering enabled on an i5 processor and GTX660 gpu.

http://jsfiddle.net/Lfmfz/2/

I guess that's already pretty good, but is there any way to squeeze some extra FPS?

XCS
  • 27,244
  • 26
  • 101
  • 151
  • can you link your code? try pushMatrix() and popMatrix()? – David West Feb 13 '13 at 16:54
  • How would pushMatrix() and popMatrix() help? I simply call ellipse 200times/frame, that's the code. – XCS Feb 13 '13 at 17:13
  • you should post some code or jsfiddle... – Saturnix Feb 14 '13 at 00:51
  • Rewrote this with Fabric.js, out of curiosity. Getting up to 35fps on my Chrome 26 (macbook pro, os x). http://jsfiddle.net/dmvFe/2/ – kangax Feb 16 '13 at 17:51
  • How can I see the fps on fabric.js ? – XCS Feb 16 '13 at 18:17
  • You're kind of mixing Processing and JavaScript code there - what do you actually want to do: 1) speed up the sketch through Processing.js or 2) do this particular thing really really fast? If (1), you're now mixing Processing and JavaScript code, so that's bad. Let's try to improve Pjs performance without breaking Processing (hit up our processing.js IRC channel or our issue tracker). If (2), use plain canvas, rather than Processing.js =) – Mike 'Pomax' Kamermans Feb 17 '13 at 22:55

1 Answers1

0
  1. Make sure you're using for loops or something similar to render these shapes. If you don't, naturally, it will be slower.
  2. If you can get away without calling fill every ellipse, that will improve runtime. If you can, try putting all the red shapes together, all the blue shapes together, et cetera.
  3. Get rid of unneccessary computations. For instance, if you have the ellipse()s positioned by random() computations or new Random(1) and nextGaussian() together (which is extremely slow on the last one), then create local variables or use Math.random() alone (which seems to be faster as far as I can see).
  4. You could use anti-aliased imageData, but that may not be supported on all devices. I use that, but I am not sure about runtime on HTML, and all those for loops could get rather... messy.

TL;DR
Don't use too many computations, don't do anything redundantly, and especially do not call ellipse over and over and over and over and over and over and over and over and over..... without iterating.

Caleb Mayhew
  • 58
  • 11